Bootstrap 下拉选择使屏幕跳转

Question

所以我在我的网站上使用 bootstrap，每个页面上都有很多 div，每个页面上都有一个下拉菜单，可以将 div 中的信息从图表到 table，反之亦然。这工作正常，除非用户从下拉菜单中选择一个选项，屏幕似乎 "jump"，将 div 放在屏幕顶部。我发现其他人也有类似的问题，说它与锚标记 (#) 有关，但我相信我需要我的，因为下拉列表确实引用了一些东西。

下拉列表：

<div class="dropdown">
   <button class="btn  btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
      <!--DROPDOWN MENU-->
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
      </li>
      <li role="presentation">
         <a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
      </li>
      <li role="presentation">
         <a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
     </li>
   </ul>
</div>

它调用的内容：

<div class="content active row" id="graphOneChart">
    ............
</div>
<div class="content" id="graphOneData">
     ............
</div>

Answer 1

当您使用锚标签 <a> 时，它会自动转到 href 标签指向的位置。如果您的 link 指向页面上的一个 id，则 link 会将屏幕滚动到 link 指向的元素。如果要使用 link 调用函数，请将 href 属性留空，href="".

Answer 2

如果您在锚点中使用散列 #，浏览器将自动滚动到具有相应 ID 的元素。

例如，点击：

<a href="#graphOneData">Data</a>

会导致页面跳转到：

<div id="graphOneData"></div>

要阻止这种情况发生，请更改 div 的 ID 或锚点的 href。

Answer 3

为了防止页面跳转，可以把href=""一并去掉，像这样把a标签留空<a>，就不会跳转了。

如果您必须保留 href 标签，您可以在 click 或 on 方法中使用 e.preventDefault()。

Bootstrap 下拉选择使屏幕跳转

Bootstrap dropdown selection makes screen jump

html

javascript

css

twitter-bootstrap

drop-down-menu