javascript - 隐藏和显示 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 的文档.