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

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin.

我知道以前有人问过这个问题，但是我并没有使用jQuery UI选项卡插件上的bind()事件获得任何结果。

I just need the index of the newly selected tab to perform an action when the tab is clicked. bind() allows me to hook into the select event, but my usual method of getting the currently selected tab does not work. It returns the previously selected tab index, not the new one:

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

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

Here is the code I am attempting to use to get the currently selected tab:

下面是我尝试使用的代码来获取当前选中的选项卡:

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

});

When I use this code, the ui object comes back undefined. From the documentation, this should be the object I'm using to hook into the newly selected index using ui.tab. I have tried this on the initial tabs() call and also on its own. Am I doing something wrong here?

当我使用这段代码时，ui对象返回时没有定义。从文档中可以看出，这应该是我使用uittab在新选择的索引中使用的对象。我在最初的选项卡()调用中尝试过，也在自己的调用中尝试过。我是不是做错了什么?

18 个解决方案

#1

For JQuery UI versions before 1.9: ui.index from the event is what you want.

对于1.9之前的JQuery UI版本:UI。事件的索引是您想要的。

For JQuery UI 1.9 or later: see the answer by Giorgio Luparia, below.

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

#2

196

If you need to get the tab index from outside the context of a tabs event, use this:

如果需要从选项卡事件的上下文中获取选项卡索引，请使用以下方法:

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

Update: From version 1.9 'selected' is changed to 'active'

更新:从1.9版本的'selected'被更改为'active'

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

#3

UPDATE [_{Sun 08/26/2012}] This answer has become so popular that I decided to make it into a full-fledged blog/tutorial
Please visit My Blog Here to see the latest in easy access information to working with tabs in jQueryUI
Also included (in the blog too) is a jsFiddle

更新[Sun 08/26/2012]这个答案变得如此流行，以至于我决定把它变成一个完整的博客/教程，请访问我的博客，看看最新的关于使用jQueryUI中包含的标签的容易访问的信息(也包括在博客中)是一个jsFiddle

¡¡¡ Update! Please note: In newer versions of jQueryUI (1.9+), ui-tabs-selected has been replaced with ui-tabs-active. !!!

¡¡¡更新!请注意:在jQueryUI(1.9+)的更新版本中，选中的ui选项已经被激活的ui选项所取代。! ! !

~~I know this thread is old, but~~ something I didn't see mentioned was how to get the "selected tab" (Currently dropped down panel) from somewhere other than the "tab events". I do have a simply way ...

我知道这个线程是旧的，但是我没有看到提到如何从“选项卡事件”之外的其他地方获得“选择选项卡”(当前下拉面板)。我有一个简单的方法……

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

And to easily get the index, of course there is the way listed on the site ...

很容易得到索引，当然还有网站上列出的方法…

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

However, you could use my first method to get the index and anything you want about that panel pretty easy ...

但是，您可以使用我的第一个方法来获取索引，并且您想要的任何东西都非常简单…

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

PS. If you use an iframe variable then .find('.ui-tabs-panel:not(.ui-tabs-hide)'), you will find it easy to do this for selected tabs in frames as well. Remember, jQuery already did all the hard work, no need to reinvent the wheel!

如果使用iframe变量，那么.find('.ui-tab -panel:not(.ui-tab -hide)')，您会发现对帧中的选定制表符也很容易做到这一点。请记住，jQuery已经完成了所有的艰苦工作，没有必要重新发明*!

Just to expand (updated)

为了扩大(更新)

Question was brought up to me, "What if there are more than one tabs areas on the view?" Again, just think simple, use my same setup but use an ID to identify which tabs you want to get hold of.

有人问我，“如果视图上有多个选项卡区域怎么办?”再一次，简单地想一下，使用相同的设置，但是使用ID来识别您想要获取的选项卡。

For example, if you have:

例如，如果你有:

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

And you want the current panel of the second tab set:

您需要第二个选项卡的当前面板:

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

And if you want the ACTUAL tab and not the panel (really easy, which is why I ddn't mention it before but I suppose I will now, just to be thorough)

如果你想要真正的标签而不是面板(真的很简单，这就是为什么我之前没有提到它但我想我现在会，为了更全面)

// 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+

Again, remember, jQuery did all the hard work, don't think so hard.

请记住，jQuery做了所有的艰苦工作，不要想得那么辛苦。

#4

If you're using JQuery UI version 1.9.0 or above, you can access ui.newTab.index() inside your function and get what you need.

如果您正在使用JQuery UI版本1.9.0或更高版本，您可以访问函数内部的UI . newtable .index()并获得所需的内容。

For earlier versions use ui.index.

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

#5

When are you trying to access the ui object? ui will be undefined if you try to access it outside of the bind event. Also, if this line

什么时候尝试访问ui对象?如果您试图在绑定事件之外访问它，ui将是未定义的。同样,如果这条线

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

is ran in the event like this:

is在这样的事件中运行:

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

selectedTab will equal the current tab at that point in time (the "previous" one.) This is because the "tabsselect" event is called before the clicked tab becomes the current tab. If you still want to do it this way, using "tabsshow" instead will result in selectedTab equaling the clicked tab.

selectedTab在那个时间点将等于当前选项卡(“先前的”选项卡)。这是因为在单击tab成为当前选项卡之前，会调用“tabsselect”事件。如果您仍然想这样做，那么使用“tabsshow”将导致selectedTab等于单击的选项卡。

However, that seems over-complex if all you want is the index. ui.index from within the event or $("#TabList").tabs().data("selected.tabs") outside of the event should be all that you need.

然而，如果你想要的只是指数，那就太复杂了。ui。来自事件或$(“#TabList”).tab (). tab ().data(“selec.tabs”)之外的索引应该是您所需要的。

#6

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

#7

this changed with version 1.9

这在1.9版本中发生了变化

something like

类似的

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


        });

should be used. This is working fine for me ;-)

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

#8

In case anybody has tried to access tabs from within an iframe, you may notice it's not possible. The div of the tab never gets marked as selected, just as hidden or not hidden. The link itself is the only piece marked as selected.

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

The following will get you the href value of the link which should be the same as the id for your tab container:

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

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

This should also work in place of: $tabs.tabs('option', 'selected');

这也可以替代:$选项卡。标签(“选项”,“选择”);

It's better in the sense that instead of just getting the index of the tab, it gives you the actual id of the tab.

更好的意思是，它不只是获取选项卡的索引，而是提供选项卡的实际id。

#9

In case if you find Active tab Index and then point to Active Tab

如果您找到活动标签索引，然后指向活动标签

First get the Active index

首先获取活动索引

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

Then using the css class get the tab content panel

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

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

now wrapped it in jQuery object to further use it

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

 var tabContent$ = $(element);

here i want to add two info the class .ui-tabs-nav is for Navigation associated with and .ui-tabs-panel is associated with tab content panel. in this link demo in jquery ui website you will see this class is used - http://jqueryui.com/tabs/#manipulation

这里我想添加两个信息，类。ui-tab -nav是用于导航的，并且。ui-tab -面板与标签内容面板相关联。在jqueryui网站的这个链接演示中，您将看到这个类被使用——http://jqueryui.com/tabs/#操作

#10

the easiest way of doing this is

最简单的方法是

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

and for index

和指数

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

#11

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

then you will have the index of tab from 0

然后从0开始有tab的索引

simple

简单的

#12

Try the following:

试试以下:

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

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

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

#13

I found the code below does the trick. Sets a variable of the newly selected tab index

我发现下面的代码很有用。设置新选择的选项卡索引的变量

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

#14

You can post below answer in your next post

你可以在你的下一个帖子中发布以下答案

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

#15

Another way to get the selected tab index is:

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

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

#16

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

In the url variable you will get the current tab's HREF / URL

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

#17

take a hidden variable like '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' and on each tab's onclick event write code like ...

取一个隐藏的变量，比如' "，在每个标签上的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>

you can get the value of 'sel_tab' on posted page. :) , simple !!!

可以在已发布页面上获取'sel_tab'的值。:),简单的! ! !

#18

If you want to ensure ui.newTab.index() is available in all situations (local and remote tabs), then call it in the activate function as the documentation says:

如果您希望确保ui. newtable .index()在所有情况下(本地和远程选项卡)都可用，那么请在activate函数中调用它，如文档所述:

$("#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/

#1