javascript 隐藏和显示 Jquery UI 选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7988014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide and show Jquery UI tabs
提问by coder
I am using jquery UI tabs and working pretty well and now I want to hide and show tabs with a click of button as shown below.
我正在使用 jquery UI 选项卡并且工作得很好，现在我想通过单击按钮来隐藏和显示选项卡，如下所示。
On each tab I have a button and when I click it it should hide the present tab and the rest tabs and should show me the next tab.(ie..If I am on tab-1 and If I click button it should show me the tab-2 and should hide 1,3 and 4 tabs) and similarly for 2,3,4 tabs.
在每个选项卡上，我都有一个按钮，当我单击它时，它应该隐藏当前选项卡和其余选项卡，并应显示下一个选项卡。（即...如果我在选项卡 1 上，如果我单击按钮，它应该显示我tab-2 应该隐藏 1,3 和 4 个选项卡），对于 2,3,4 选项卡也类似。
This is what I mean ?
这就是我的意思？
So how do I do that?
那我该怎么做呢？
Here is my code: script:
这是我的代码：脚本：
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Css:
css：
<style type="text/css">
#tabs { width: 700px; }
</style>
Tabs:
标签：
<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>
采纳答案by coder
I found the solution to my problem here http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/
我在这里找到了我的问题的解决方案http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/
回答by Jochen Van de Velde
I believe the following snippet of code should do what you want.
我相信以下代码片段应该可以满足您的需求。
$("#button_id").click(function() {
$("#tabs").tabs('select', 'tab_index');
});
Tab_index should be an integer, it specifies the position of the tab (starting at zero!), so here you would pass in the position of the next or previous tab. You can retrieve the current tab indexas follows:
Tab_index 应该是一个整数，它指定了选项卡的位置（从零开始！），因此在这里您将传入下一个或上一个选项卡的位置。您可以按如下方式检索当前选项卡索引：
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');
I suggest you have a look at the documentation of the .tabs() select method.
我建议您查看.tabs() 选择方法的文档。
回答by comu
jQuery UI on there site says the correct jQuery syntax for this is to have
网站上的 jQuery UI 说正确的 jQuery 语法是
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
