jQuery 选项卡阻止滚动到锚点

Posted 2023-05-08

【中文标题】jQuery 选项卡阻止滚动到锚点

【英文标题】：jQuery tabs prevent scroll to anchor

【发布时间】：2017-10-02 04:26:42

【问题描述】：

我正在使用像 ths 这样的 jQuery 选项卡...

   <div id="tabs">
       <ul class="tabs-menu">
           <li><a href="#tab1" class="selected">Tab 1</a></li>
           <li><a href="#tab2">Tab2</a></li>
        </ul>

        <div id="tab1">
            Tab1 Content
        </div>
        <div id="tab2">
             Tab2 Content
        </div>
   </div>

jQuery(document).ready(function() 
    jQuery('#tabs').tabs();
);

这可以正常工作，但是当我尝试使用 www.example.com/page#tab2 打开 tab2 处于活动状态的 URl 时，页面会滚动到锚点而不是从顶部加载。

如何防止这种行为？

【问题讨论】：

显示标签调用的 jquery 代码？

已经用 jQuery 更新了 op

【参考方案1】：

你也可以试试这个。

<script src="https://code.jquery.com/jquery-1.12.4.js></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script>


<div id="tabs" style="margin-top: 2%;min-height: 500px;">
      <ul style="background: -webkit-linear-gradient(left top, #286090, #3b8a69); ">
        <li><a href="#tabs-1">Menu privilege</a></li>
        <li><a href="#tabs-2">Transaction Rule</a></li>

      </ul>
      <div id="tabs-1">
        <h1>
        Tab1</h1>

      </div>
      <div id="tabs-2">
        <h1>
        Tab 2</h1>
      </div>
      </div>

jQuery(document).ready(function() 
    jQuery('#tabs').tabs();
);

【参考方案2】：

你可以使用tabsselect监听器。

$(document).ready(function () 
        $("#tabs").bind('tabsselect', function(event, ui) 
            event.preventDefault();  // This will kill the default behavior.
            window.location.href = ui.tab;
        );
);

【讨论】：

evt.preventDefault(); 可以做你想做的事。查看更新。