Question

所以我在我的网站上使用bootstrap，每个页面上都有很多div，每个页面都有一个下拉列表，将div中的信息从图表更改为表格，反之亦然。这种方法很好，除非当用户从下拉菜单中选择一个选项时，似乎＆＃34;跳转＆＃34;，将该div放在屏幕顶部。我发现一个类似的问题让别人说它与锚标签（＃）有关，但我相信我需要我的，因为下拉确实是指某些东西。

DROPDOWN：

<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 =＆＃34;＆＃34;总而言之，只是像这样$(function () { // Hide all group and account level $('.pa-dt-group-account-level').hide(); $('.pa-dt-account-level').hide(); // Define our button for toggling var button = $( "a.pa-dt-toggle" ); button.click(function() { // get the parent ID var parentId = $(this).parents('tr').attr("id"); // get the parent account level var accountType = $(this).parents('tr').attr("data-account-level"); console.log(parentId); console.log(accountType); $(this).text($(this).text() == '+' ? '-' : '+'); if ($(this).hasClass("pa-dt-toggle-active")) { $(this).removeClass('pa-dt-toggle-active'); $('[data-owner="' + parentId +'"]').hide(); } else { $(this).addClass('pa-dt-toggle-active'); $('[data-owner="' + parentId +'"]').show(); } }); button.click(function(e){ e.stopPropagation(); }); $('.LargeToggleAll').click(function () { $(this).text($(this).text() == '+' ? '-' : '+'); $(".toggleLarge").each(function(){ if ($(this).hasClass("pa-dt-toggle-active")) { $(this).removeClass('pa-dt-toggle-active'); $('[data-account-level="group"]').hide(); $('[data-account-level="account"]').hide(); $(this).text("+"); $(".MediumToggleAll").text("+"); } else { $(this).addClass('pa-dt-toggle-active'); $('[data-account-level="group"]').show(); $(this).text("-"); } }) }); $('.MediumToggleAll').click(function () { $(this).text($(this).text() == '+' ? '-' : '+'); $(".toggleMedium").each(function(){ if ($(this).hasClass("pa-dt-toggle-active")) { $(this).removeClass('pa-dt-toggle-active'); $('[data-account-level="account"]').hide(); $(".toggleMedium").text("+"); } else { $(this).addClass('pa-dt-toggle-active'); $('.MediumToggleAll').addClass('pa-dt-toggle-active'); $('[data-account-level="group"]').show(); $('[data-account-level="account"]').show(); $(".toggleLarge").text("-"); $(".toggleMedium").text("-"); $(".LargeToggleAll").text("-"); } }) }); });保持标签为空，然后就不会跳。

如果您必须保留href标记，则可以使用<a>或e.preventDefault()方法中的click。

Answer 2

当您使用锚标记<a>时，它会自动转到href标记所指向的位置。如果您的链接指向页面上的ID，则链接将滚动屏幕到链接指向的元素。如果您想使用该链接调用某个功能，请将href属性设为空，href=""。

Answer 3

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

例如，点击：

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

会导致页面跳转到：

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

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

Bootstrap下拉选项使屏幕跳转

3 个答案: