jQuery的标签防止滚动锚

我使用jQuery标签一样的部份...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然后页面滚动到锚点，而不是从顶部加载。

如何防止此行为？

来源

2017-05-04 fightstarr20

显示你的标签调用jQuery代码？ –

已经更新了现在与jQuery – fightstarr20

您可以使用tabsselect监听器。

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

来源

2017-05-04 06:53:25

只适用于tab1，tab2仍然跳转 – fightstarr20

'evt.preventDefault（）;'可以做你想做的。查看更新。 –

你也可以试试这个。

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

来源

2017-05-04 07:02:28 techhunter

jQuery的标签防止滚动锚

回答

相关问题