我正在使用 jquery UI 选项卡并且工作得很好,现在我想通过单击按钮来隐藏和显示选项卡,如下所示。
在每个选项卡上我都有一个按钮,当我单击它时,它应该隐藏当前选项卡和其余选项卡,并应该显示下一个选项卡。(即..如果我在选项卡 1 上并且如果我单击按钮它应该显示 tab-2 并隐藏 1,3 和 4 选项卡),对于 2,3,4 选项卡也是如此。
这就是我的意思吗?
那么我该怎么做呢?
这是我的代码: 脚本:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
CSS:
<style type="text/css">
#tabs { width: 700px; }
</style>
标签:
<div id="tabs">
<ul>
<li><a href="#tabs-1">TAB1</a></li>
<li><a href="#tabs-2">TAB2</a></li>
<li><a href="#tabs-3">TAB3</a></li>
<li><a href="#tabs-4">TAB4</a></li>
</ul>
<div id="tabs-1">
<p></p>
</div>
<div id="tabs-2">
<p></p>
</div>
<div id="tabs-3">
<p></p>
<p></p>
</div>
</div>
最佳答案
我相信以下代码片段应该可以满足您的要求。
$("#button_id").click(function() {
$("#tabs").tabs('select', 'tab_index');
});
Tab_index 应该是一个整数,它指定选项卡的位置(从零开始!),因此在这里您将传入下一个或上一个选项卡的位置。 您可以retrieve the current tab index如下:
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');
我建议你看看 .tabs() select method 的文档.
关于javascript - 隐藏和显示 Jquery UI 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7988014/