我正在使用像这样的 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 时,页面会滚动到 anchor ,而不是从顶部加载。
如何防止这种行为?
最佳答案
你也可以尝试这个。
<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();
});
关于jQuery 选项卡阻止滚动到 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43775293/