如何在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>

- Behseini

Answer 1

在您的单击操作函数中使用

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

将 # 替换为您想要选择的选项卡索引。

编辑：从“selected”更改为“active”，已弃用“selected”。

- Daniel Esponda

---

自jQuery 1.9版本开始，selected被标记为过时选项，并在jQuery 1.10中被移除，它已被active所替代。 http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active - Wolkenarchitekt

补充一点，该索引是从零开始的。 - kneidels

我使用了这个方法，但它显示错误，说tab不是一个函数。 - Basit

对于那些遇到“tab不是函数”错误的人，你需要包含 jquery-ui 库。 - Abhyudai

Answer 2

使用简单的jQuery解决方案 - 查找 <a> 元素，其中href="x" 并单击它：

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

- Denys Wessels

---

请注意，这可能会产生不良副作用，因为与单击相关联的事件可能会异步运行到您的代码中，从而创建潜在的竞态条件。 - Mmm

Answer 3

仅仅为了完整详细澄清，这就是目前版本的jQuery Ui的工作方式。

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

其中＃是您想要激活的选项卡的索引。

- Mike Moon

Answer 4

在您的点击操作功能中使用

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

将#替换为您想选择的选项卡索引。

- Pažout

---

这个答案看起来可能与上面得票最高的被接受答案重复，但实际上那个答案是在这个答案之后编辑成重复的。 - Dexygen

@GeorgeJempty 不完全正确，George。如果您查看我的编辑，我只更改了“selected”->“active”，这个答案的措辞是从我的原始答案复制并粘贴的。 - Daniel Esponda

Answer 5

我知道这是一个老问题，但是我认为改变选择的选项卡的方法已经稍微改变了。

现在改变活动选项卡的方法是通过给选项卡的索引赋值active。请注意，索引从0开始而不是1。要使第二个选项卡处于活动状态，您将使用索引1。

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

- Jaylen

---

在Firefox 84.0 [2021年1月]中，使用私有字段（#，例如#this_tab）会在开发者工具控制台中抛出“Uncaught SyntaxError: private fields are not currently supported”的注释，并且链接会在新的（Firefox而不是JQuery）标签页中打开。根据此答案指定标签页编号可以解决此问题。对我来说，其他答案都没有起作用。 - Victoria Stuart

Answer 6

如果您想根据 ID 而不是索引来设置活动选项卡，也可以使用以下代码：

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

- Carl

---

我喜欢你的方法，我正在使用它，但是DOM指示（jQuery.index用法）是错误的，应该如下所示： $('#tabs>ul:first>li').index( $('a[href="'+window.location.hash+'"]').closest('li') ); - devplayer

Answer 7

HTML：首先，您需要保存帖子的标签索引。

<input type="hidden" name="hddIndiceTab" id="hddIndiceTab" value="<?php echo filter_input(INPUT_POST, 'hddIndiceTab');?>"/>

JS

$( "#tabs" ).tabs({
    active: $('#hddIndiceTab').val(), // activate the last tab selected
    activate: function( event, ui ) {
        $('#hddIndiceTab').val($( "#tabs" ).tabs( "option", "active" )); // save the tab index in the input hidden element
    }
});

- Cristhian Ortega

---

我喜欢这个解决方案，因为它扩展了jQuery UI框架以提供一个帮助器。然而，它需要一种方法来提供文本标签作为输入，使其可以在任何地方（而不仅仅是事件处理程序）被简单调用。 - justdan23

Answer 8

您可以使用以下内容：

$(document).ready(function() {
    $("#tabs").tabs();
    $('#action').click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
    });
});

还要考虑将输入类型更改为button，而不是submit，除非您要提交页面。

- Java_User

Answer 9

只需触发一次点击，对我来说就可以正常工作：

$("#tabX").trigger("click");

- Edwin Thomas

Answer 10

我想将这个一行代码的解决方案发布出来，就像在回复卡尔的方法中发布的那样：

$('#tabs>ul:first>li').index( $('a[href="'+window.location.hash+'"]').closest('li') ); 

问候

- devplayer