jQuery 选项卡阻止滚动到锚点

Question

我正在使用像 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 时，页面会滚动到锚点而不是从顶部加载。

如何防止这种行为？

Answer 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();
});

Answer 2

你可以使用tabsselect监听器。

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