112

我知道之前有人问过这个特定问题，但我没有使用插件bind()上的事件得到任何结果。jQuery UI Tabs

我只需要index新选择的选项卡在单击选项卡时执行操作。bind()允许我挂钩到 select 事件，但我获取当前选定选项卡的常用方法不起作用。它返回先前选择的选项卡索引，而不是新的：

var selectedTab = $("#TabList").tabs().data("selected.tabs");

这是我试图用来获取当前选定选项卡的代码：

$("#TabList").bind("tabsselect", function(event, ui) {

});

当我使用这段代码时，ui 对象又回来了undefined。从文档来看，这应该是我用来使用 ui.tab 挂钩到新选择的索引的对象。我已经在初次tabs()通话时尝试过，也单独尝试过。我在这里做错了吗？

4

20 回答 20

201

如果您需要从选项卡事件的上下文之外获取选项卡索引，请使用以下命令：

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

更新：从版本 1.9 'selected' 更改为 'active'

$("#TabList").tabs('option', 'active')
于 2009-08-26T14:52:44.617 回答
72

对于 1.9 之前的 JQuery UI 版本：ui.indexfrom theevent是你想要的。

对于 JQuery UI 1.9 或更高版本：请参阅下面 Giorgio Luparia 的回答。

于 2008-11-18T21:39:33.723 回答
43

更新[ Sun 08/26/2012 ] 这个答案已经变得如此受欢迎，以至于我决定将其变成一个成熟的博客/教程
请访问我的博客在这里查看最新的轻松访问信息以使用jQueryUI 中的选项卡
还包括（也在博客中）是一个jsFiddle

更新！请注意：在较新版本的 jQueryUI (1.9+) 中，ui-tabs-selected已替换为ui-tabs-active. ！！！

我知道这个线程很旧，但我没有看到提到的是如何从“选项卡事件”以外的其他地方获取“选定选项卡”（当前下拉面板）。我有一个简单的方法...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

而要轻松获取索引，当然有网站上列出的方式...

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

但是，您可以使用我的第一种方法来轻松获取索引以及您想要的有关该面板的任何内容...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS。如果您使用 iframe 变量然后 .find('.ui-tabs-panel:not(.ui-tabs-hide)')，您会发现对框架中的选定选项卡执行此操作也很容易。请记住，jQuery 已经完成了所有艰苦的工作，无需重新发明轮子！

只是为了扩展（更新）

有人向我提出了一个问题，“如果视图上有多个选项卡区域怎么办？” 再一次，简单的想，使用我相同的设置，但使用一个 ID 来识别你想要掌握的标签。

例如，如果您有：

$('#example-1').tabs();
$('#example-2').tabs();

并且您想要第二个选项卡集的当前面板：

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

如果你想要 ACTUAL 选项卡而不是面板（真的很简单，这就是为什么我之前没有提到它，但我想我现在会提到它，只是为了彻底）

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

再一次，记住，jQuery 做了所有的努力，不要想得那么难。

于 2011-11-01T14:25:50.947 回答
42

如果您使用的是 1.9.0 或更高版本的 JQuery UI，您可以在您的函数中访问ui.newTab.index()并获取您需要的内容。

对于早期版本，请使用ui.index。

于 2012-10-19T11:32:32.793 回答
13 
var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');
于 2013-03-12T13:31:01.537 回答
11

您何时尝试访问 ui 对象？如果您尝试在绑定事件之外访问它，ui 将是未定义的。另外，如果这条线

var selectedTab = $("#TabList").tabs().data("selected.tabs");

在这样的事件中运行：

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab 将等于该时间点的当前选项卡（“前一个”选项卡）。这是因为在单击的选项卡变为当前选项卡之前调用了“tabsselect”事件。如果您仍想以这种方式执行此操作，则使用“tabsshow”将导致 selectedTab 等于单击的选项卡。

但是，如果您想要的只是索引，这似乎过于复杂。事件内部的 ui.index 或事件外部的 $("#TabList").tabs().data("selected.tabs") 应该是您所需要的。

于 2008-11-19T02:29:36.180 回答
5

这在 1.9 版中有所改变

就像是

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

应该使用。这对我来说很好;-)

于 2013-02-08T18:35:00.483 回答
4

如果有人试图从 iframe 中访问选项卡，您可能会注意到这是不可能的。选项卡div的 永远不会被标记为已选中，就像隐藏或未隐藏一样。链接本身是唯一标记为选中的部分。

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

以下将为您href提供链接的值，该值应与选项卡容器的 id 相同：

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

这也应该代替：$tabs.tabs('option', 'selected');

从某种意义上说，最好不要只获取选项卡的索引，而是为您提供选项卡的实际 ID。

于 2011-04-20T18:48:03.133 回答
4

最简单的方法是

$("#tabs div[aria-hidden='false']");

和索引

$("#tabs div[aria-hidden='false']").index();
于 2013-04-03T13:39:00.660 回答
4

如果您找到活动选项卡索引，然后指向活动选项卡

首先获取Active索引

var activeIndex = $("#panel").tabs('option', 'active');

然后使用css类获取tab内容面板

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex];

现在将其包装在 jQuery 对象中以进一步使用它

 var tabContent$ = $(element);

在这里，我想添加两个信息，该类.ui-tabs-nav用于与导航关联的导航，并.ui-tabs-panel与选项卡内容面板关联。在 jquery ui 网站中的此链接演示中，您将看到使用了此类 - http://jqueryui.com/tabs/#manipulation

于 2013-07-11T17:53:00.973 回答
3 
$( "#tabs" ).tabs( "option", "active" )

那么您将拥有从 0 开始的选项卡索引

简单的

于 2013-03-21T14:20:09.947 回答
3

我发现下面的代码可以解决问题。设置新选择的标签索引的变量 

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});
于 2013-09-09T22:23:41.680 回答
2

尝试以下操作：

var $tabs = $('#tabs-menu').tabs();

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

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;
于 2012-03-05T16:23:33.417 回答
2

您可以在下一篇文章中发布以下答案

var selectedTabIndex= $("#tabs").tabs('option', 'active');
于 2015-09-29T07:27:26.390 回答
1

获取所选标签索引的另一种方法是：

var index = jQuery('#tabs').data('tabs').options.selected;
于 2011-10-26T03:29:14.860 回答
1 
$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});

在url变量中，您将获得当前选项卡的 HREF / URL

于 2013-04-19T05:22:26.187 回答
1

您可以通过以下方式找到它：

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});
于 2020-05-20T13:26:05.450 回答
0

取一个隐藏变量，'<input type="hidden" id="sel_tab" name="sel_tab" value="" />'并在每个选项卡的 onclick 事件上编写代码，如...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

您可以在发布的页面上获取“sel_tab”的值。：） ， 简单的 ！！！

于 2010-12-10T09:12:21.783 回答
0

如果您想确保ui.newTab.index()在所有情况下都可用（本地和远程选项卡），请在激活函数中调用它，如文档所述：

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

于 2014-09-30T00:36:05.127 回答
0 
$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});
于 2018-08-05T14:46:34.147 回答