jQuery UI选项卡-如何获取当前选定的选项卡索引

我知道之前曾有人问过这个特定问题，但是使用插件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()通话中尝试过此操作，也可以自行尝试。我在这里做错什么了吗？

对于1.9之前的JQuery UI版本：ui.index来自event就是您想要的。

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

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

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

更新：从1.9版的“选定”更改为“活动”

$("#TabList").tabs('option', 'active')

UPDATE [ _{太阳2012年8月26日} ]这个答案已经变得如此受欢迎，我决定把它变成一个完整的博客/教程
请访问我的博客在这里看到方便地访问信息，最新的与工作选项卡中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做了所有艰苦的工作，不要这么想。

如果您使用的是1.9.0或更高版本的JQuery UI，则可以在函数内部访问ui.newTab.index（）并获取所需的内容。

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

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

您何时尝试访问ui对象？如果您尝试在bind事件之外访问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”）应该是您所需要的。

这在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());
            }


        });

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

如果有人尝试从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。

最简单的方法是

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

和索引

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

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

首先获取活动索引

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

然后使用css类获取选项卡内容面板

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

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

 var tabContent$ = $(element);

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

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

那么您的标签索引将从0开始

简单

请尝试以下操作：

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

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

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

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

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

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

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

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

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

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

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

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

采取像这样的隐藏变量，'<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”的值。:)，简单！

如果要确保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/

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});