[javascript] jQuery UI Tabs - How to Get Currently Selected Tab Index

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?

Another way to get the selected tab index is:

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

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.

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/

the easiest way of doing this is

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

and for index

$("#tabs div[aria-hidden='false']").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');

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/

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

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

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

You can post below answer in your next post

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

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.

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

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

then you will have the index of tab from 0

simple

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.

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

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

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

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.

You can find it via:

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

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

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.

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.

Another way to get the selected tab index is:

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

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

Try the following:

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

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

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

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

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

then you will have the index of tab from 0

simple

You can post below answer in your next post

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

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

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.

You can find it via:

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

the easiest way of doing this is

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

and for index

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

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

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

Try the following:

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

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

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

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

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.

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.