jQuery的標籤防止滾動錨

Question

我使用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(); 
}); 

這工作正常，但是當我試着和TAB2活躍，www.example.com/page#打開URL tab2然後頁面滾動到錨點，而不是從頂部加載。

如何防止此行爲？

Answer 1

您可以使用tabsselect監聽器。

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

Answer 2

你也可以試試這個。

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