2017-05-04 8 views
0

を固定するには、スクロールを防ぐ...jQueryのタブが、私は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でURLを開くときtab2の場合、上から読み込むのではなく、ページがアンカーポイントにスクロールします。

どうすればこの現象を防ぐことができますか?

+0

タブ呼び出しのjqueryコードを表示しますか? –

+0

jQueryでopを更新しました – fightstarr20

答えて

0

リスナーをとすることができます。

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

これはtab1のみで動作し、tab2はまだジャンプします – fightstarr20

+0

'evt.preventDefault();'更新を参照してください。 –

0

これも試すことができます。

<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(); 
}); 
関連する問題