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

我知道这个特定的问题已经解决了，但是使用jQueryUITabs插件上的bind事件并没有得到任何结果

我只需要新选择的选项卡的索引，就可以在单击选项卡时执行操作。bind允许我钩住select事件，但获取当前所选选项卡的常用方法不起作用。它返回以前选择的选项卡索引，而不是新的索引：

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

以下是我试图用来获取当前所选选项卡的代码：

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

});

当我使用这段代码时，ui对象没有定义。从文档中可以看出，这应该是我用来使用ui.tab钩住新选择的索引的对象。我在最初的tabs通话中尝试过这一点，也尝试过它自己。我在这里做错了什么吗？

对于1.9之前的JQuery UI版本：UI.index是您想要的

---

对于jQueryUI1.9或更高版本：请参阅下面的GiorgioLuparia所作的说明。

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

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

在如下事件中运行：

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

所选选项卡将在该时间点与上一个选项卡相等。这是因为在单击的选项卡变为当前选项卡之前调用了tabsselect事件。如果您仍然想这样做，使用tabsshow将导致selectedTab与单击的选项卡相等

---

然而，如果您只需要索引，那么这似乎过于复杂了。事件内的ui.index或事件外的$TabList.tabs.dataselected.tabs应该是您所需的全部内容。

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

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

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

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

---

在每个选项卡的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”的值：，简单

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

这也应该代替：$tabs.tabs'option'，'selected'

---

从某种意义上讲，它比只获取选项卡的索引更好，它可以为您提供选项卡的实际id。

获取所选选项卡索引的另一种方法是：

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

更新【Sun 08/26/2012】这个答案非常流行，我决定把它做成一个完整的博客/教程 请访问以查看在jQueryUI中使用选项卡的最新易访问信息 博客中还包括一个

更新！请注意：在jQueryUI 1.9+的较新版本中，所选的ui选项卡已替换为活动的ui选项卡

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

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 ....

另外，如果您使用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)');

如果你想要实际的标签，而不是真正容易的面板，这就是为什么我以前没有提到它，但我想我现在会提到，只是为了彻底

// 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做了所有艰苦的工作，不要想得那么辛苦。

尝试以下方法：

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

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

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

---

如果您使用的是jQueryUIVersion1.9.0或更高版本，那么您可以在函数中访问UI.newTab.index并获得所需的内容

---

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

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


        });

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

var$tabs=$'tabs-menu'。选项卡； //jQueryUI1.8 var selected=$tabs.tabs'option'，'selected'； //jQueryUI1.9+ var active=$tabs.tabs'option'，'active'； 然后您将拥有0中的tab索引

---

简单

最简单的方法是

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

和作为索引

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

---

在url变量中，如果找到活动选项卡索引，然后指向活动选项卡，您将获得当前选项卡的HREF/url

首先获取活动索引

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标签导航是为导航协会

---

与和关联。ui选项卡面板与选项卡内容面板关联。在jQueryUI网站的这个链接演示中，您将看到这个类被使用-

我发现下面的代码实现了这个技巧。设置新选定选项卡索引的变量

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

如果要确保ui.newTab.index在所有情况下都可用于本地和远程选项卡，请在激活功能中调用它，如所示：

---

你可以在下一篇文章中发布下面的答案

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

您可以通过以下途径找到：

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

---

---

回答得很好！我在网站上总结了你做的事情，只是为了更容易得到答案。谢谢，Q提到ui对象为空，因此ui.index目前将失败。我想答案可能并没有包括这个那么简单。这是一个完美的答案，谢谢你的精彩例子！我试着在一次投篮中完成所有动作，但没有成功。在我将其拆分后，所有内容都按广告的方式运行。答案就在那里-使用ui.index属性获取tabselect事件中的当前索引…..答案应该更新，因为它不适用于JQuery ui 1.9.0。您应该根据升级指南将ui.index更改为ui.newTab.index@Ben:您的解决方案提供了以前选择的选项卡，因为触发tabsselect事件时，该选项卡就是索引。@Michael:您阅读了我的答案还是只是获取了代码？在我的回答中，我声明代码不会按原样工作，并提供了一些“tabshow”事件的替代方案；ui.index；$'TabList'.tabs.data'selected.tabs'：很抱歉我的回复太晚。是的，ui.index工作得很好。我只是想指出一个事实，selected.tabs提供了先前选择的选项卡，而不是当前的选项卡。我无意冒犯你的回答。不管怎样，这似乎是我所需要的。看起来这实际上给出了默认选项卡，而不是当前选择的选项卡。我错过了什么？42票不会错吧？是的，这个解决方案很有帮助。Thank@contract在jQuery UI 1.9版中，“selected”选项已重命名为“active”。请参阅精彩，谢谢！如果你愿意，你也可以提供这个作为答案。这正是我所需要的-谢谢！在jQuery UI 1.9版中，“selected”选项已重命名为“active”，请参见jqueryui.com/changelog/1.9.0。我没有投票否决您，但没有理由添加额外的标记和内联JavaScript。特别是因为他已经在使用jQuery了……这个答案对于查找当前活动的选项卡非常有用，特别是当不在选项卡选择事件的上下文中时。如果您能用一些额外的细节充实您的答案，那将是非常棒的。欢迎使用Stack Overflow！虽然链接是分享知识的好方法，但如果将来它们被破坏了，它们就不会真正回答这个问题。在回答中添加回答问题的链接的基本内容。如果内容太复杂或太大而不适合此处，请描述建议解决方案的总体思路。请记住始终保留原始解决方案网站的链接引用。见：

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

$("#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());                   
        },
});

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

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

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