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 Ui

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

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

Answer 3

简单的jQuery解决方案 - 在<a>找到href="x"元素，然后点击它：

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

Answer 4

使用

进行点击操作的功能

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

其中#被您要选择的标签索引替换。

Answer 5

我知道这是一个老问题。但我认为更改所选标签的方式已经改变了

现在更改活动选项卡的方法是激活选项卡的索引。请注意，索引从0开始而不是1.要激活第二个标签，您将使用索引1。

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

Answer 6

您可以使用：

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

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

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
    }
});

Answer 8

只需触发一次点击，就可以为我工作：

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

Answer 9

如果要通过ID而不是索引来设置活动标签，还可以使用以下内容：

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

Answer 10

如果要从选项卡 1 激活选项卡 2，请执行以下操作

$($("#tabs").find("li")[0])[0].className = "nav-item";  // tab 1
$($("#tabs").find("li")[1])[0].className = "nav-item active";  // tab 2

var aTab = $('#tabs-2'); // tab 2 content div

aTab[0].className = "tab-pane active";

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

10 个答案: