如何在jQuery Ui中设置活动选项卡

Question

你能告诉我如何在jquery ui中设置活动选项卡,只需单击选项卡中的按钮吗？

我有一个像这样的按钮:

<input id="action" type="submit" value="Go to Action">

这是代码,

<script>
$(function() {
 $( "#tabs" ).tabs();
 $( "#action" ).on("click", function(){});
});

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>

Answer 1

在您的函数内部使用单击操作

$( "#tabs" ).tabs({ active: # });

其中#被您要选择的选项卡索引替换.

编辑:从已选择更改为活动,已弃用已选中

Answer 2

简单的jQuery解决方案 - 在<a>其中找到元素href="x"并单击它:

$('a[href="#tabs-2"]').click();

Answer 3

只是为了详细说明.这适用于当前版本的jQuery Ui

$( "#tabs" ).tabs( "option", "active", # );

其中#是要激活的选项卡的索引.

Answer 4

在您的函数内部使用单击操作

$( "#tabs" ).tabs({ active: # });

其中#由要选择的选项卡索引替换.

Answer 5

我知道这是一个老问题.但我认为更改所选标签的方式略有改变

现在更改活动选项卡的方法是激活选项卡的索引.请注意,索引从0开始而不是1.要使第二个选项卡处于活动状态,您将使用索引1.

//this will select your first tab
$( "#tabs" ).tabs({ active: 0 });

Answer 6

如果要通过ID而不是索引来设置活动选项卡，则还可以使用以下命令：

$('#tabs').tabs({ active: $('#tabs ul').index($('#tab-101')) });