javascript - Bootstrap 下拉选择使屏幕跳转

Question

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

下拉列表:

<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

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

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