Javascript 隐藏和显示Jquery UI选项卡

我正在使用jQueryUI选项卡，并且工作得很好，现在我想通过单击按钮隐藏和显示选项卡，如下所示

在每个选项卡上，我都有一个按钮，当我单击它时，它应隐藏当前选项卡和其他选项卡，并应显示下一个选项卡。（即，如果我在选项卡1上，如果我单击按钮，则应显示选项卡2，并应隐藏1,3和4个选项卡），同样，对于2,3,4个选项卡

这就是我的意思

那我该怎么做呢

这是我的密码： 脚本：

$（函数（）{
$（“#制表符”）.tabs（）；
});

Css:

#制表符{宽度：700px；}

选项卡：

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

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

$（函数（）{
$（“#制表符”）.tabs（）；
});

我相信下面的代码片段应该可以满足您的需要

$("#button_id").click(function() {
  $("#tabs").tabs('select', 'tab_index');
});

Tab_索引应该是一个整数，它指定了选项卡的位置（从零开始！），因此在这里您可以传递下一个或上一个选项卡的位置。 你可以这样做：

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); 

---

我建议您看一下的文档。

我在这里找到了解决问题的方法

我知道如果没有这个方法，它将无法工作，我希望它可以显示和隐藏。然后您将不得不创建自定义功能。我正在使用hidde和show选项卡，并应用了此解决方案。请提供实际的解决方案，而不是简单的链接，好吗？提前谢谢！

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

$("#button_id").click(function() {
  $("#tabs").tabs('select', 'tab_index');
});

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected');