118

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.

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:

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?

20 Answers 20

206

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'

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

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

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

13
  • Very nice answer! I included a summary of what you did in the website just to make it easier to get the answer.
    – torial
    Nov 18, 2008 at 21:45
  • Cheers, the Q mentioned the ui object was null, therefore ui.index will fail at present. I think the answer maybe not so simple as including that.
    – redsquare
    Nov 18, 2008 at 22:16
  • This was a perfect answer, and thanks for the awesome example! I was trying to do everything in 1 shot, and it wasn't working. After I split it out, everything worked as advertised. Nov 19, 2008 at 2:23
  • 4
    The answer is there - use ui.index property to get the current index in the tabselect event.....
    – redsquare
    Nov 5, 2009 at 12:27
  • 17
    Answer should be updated because it's not working with JQuery UI 1.9.0. You should change ui.index with ui.newTab.index() according to the Upgrade Guide (jqueryui.com/upgrade-guide/1.9/…) Oct 19, 2012 at 8:46
45

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.

For earlier versions use ui.index.

1
  • 6
    It would be great if you could flesh out your answer with some additional detail.
    – Sledge
    Oct 6, 2017 at 14:33
43

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


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


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!

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.

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.

2
  • Excellent, thanks! If you want you could also provide this as an answer to stackoverflow.com/q/1864219/11992.
    – nikow
    Nov 22, 2011 at 13:49
  • 5
    The 'selected' option has been renamed to 'active' in jQuery UI version 1.9 (see jqueryui.com/changelog/1.9.0).
    – jake
    Oct 21, 2012 at 15:30
14
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');
12

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

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

is ran in the event like this:

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

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.

3
  • @Ben : your solution gives the previous selected tab as that was the index when the tabsselect event was triggered. Feb 19, 2010 at 23:53
  • 1
    @Michael: Did you read my answer or just grab the code? In my answer I state that the code will not work as is and provide a few alternatives ('tabshow' event; ui.index; $('TabList').tabs().data('selected.tabs')) Feb 21, 2010 at 1:14
  • : Sorry about my late response. Yeah, the ui.index works just fine. I just wanted to point out the fact that selected.tabs gives the "previous" selected tab, not the cureent one. I mean no offense to your answer. Feb 24, 2010 at 2:36
6

this changed with version 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 ;-)

0
5

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.

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

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.

5

the easiest way of doing this is

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

and for index

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

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

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

now wrapped it in jQuery object to further use it

 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

4

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();
    }
});
3
$( "#tabs" ).tabs( "option", "active" )

then you will have the index of tab from 0

simple

3

You can post below answer in your next post

var selectedTabIndex= $("#tabs").tabs('option', 'active');
1
  • This answer is useful to find the current active tab, particularly when not in the context of a tab selection event. Nov 2, 2015 at 19:17
2

Try the following:

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

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

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

You can find it via:

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

Another way to get the selected tab index is:

var index = jQuery('#tabs').data('tabs').options.selected;
1
$("#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

0

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

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

1
  • 2
    I did not vote you down, but there is no reason for the extra markup and inline JavaScript. Especially since he is already using jQuery... Dec 22, 2011 at 15:47
0

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:

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

0
$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});
1
  • 1
    Welcome to Stack Overflow! While links are great way of sharing knowledge, they won't really answer the question if they get broken in the future. Add to your answer the essential content of the link which answers the question. In case the content is too complex or too big to fit here, describe the general idea of the proposed solution. Remember to always keep a link reference to the original solution's website. See: How do I write a good answer? Aug 5, 2018 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.