隐藏并显示Jquery UI选项卡

Question

我正在使用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>

Answer 1

我相信下面的代码片段可以做你想要的。

$("#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的文档。

Answer 2

我在http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/

找到了问题的解决方案

Answer 3

网站上的jQuery UI说明正确的jQuery语法是

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>