我正在尝试直接从锚链接链接,比如回到3选项卡而我无法使其正常工作。它从菜单中完美运行,但是当我尝试从tab5链接到tab3时,无法使用锚点。
这是我正在使用的JS。
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
我的代码有问题或遗失了吗?
答案 0 :(得分:2)
如果我正确理解你想以编程方式更改标签,如果是这样,你可以使用$('.tabs').tabs('option', 'active', tab_index);
,请查看以下示例。
希望这有帮助。
$(function() {
$('.tabs').tabs();
$("#go_to_tab_3").click(function() {
$('.tabs').tabs('option', 'active', 2); //index 2 mean tab 3
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 </a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>tab 1 content.</p>
</div>
<div id="tabs-2">
<p>tab 2 content.</p>
</div>
<div id="tabs-3">
<p>tab 3 content.</p>
</div>
</div>
<br>
<button id='go_to_tab_3' type='button'>Go to tab 3</button>
&#13;