jQuery UI Tabs - How to Get Currently Selected Tab Index

Javascript Jquery Jquery Ui Tabs Jquery Ui-Tabs

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

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.

Solution 9 - Javascript

the easiest way of doing this is

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

and for index

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

Solution 10 - Javascript

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

.ui-tabs-panel

http://jqueryui.com/tabs/#manipulation

Solution 11 - Javascript

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

then you will have the index of tab from 0

simple

Solution 12 - Javascript

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

Solution 13 - Javascript

Try the following:

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

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

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

Solution 14 - Javascript

You can post below answer in your next post

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

Solution 15 - Javascript

You can find it via:

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

Solution 16 - Javascript

Another way to get the selected tab index is:

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

Solution 17 - Javascript

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

Solution 18 - Javascript

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

Solution 19 - Javascript

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/

Solution 20 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Mark Struzinski	View Question on Stackoverflow
Solution 1 - Javascript	Contra	View Answer on Stackoverflow
Solution 2 - Javascript	redsquare	View Answer on Stackoverflow
Solution 3 - Javascript	SpYk3HH	View Answer on Stackoverflow
Solution 4 - Javascript	Giorgio Luparia	View Answer on Stackoverflow
Solution 5 - Javascript	MeneerBij	View Answer on Stackoverflow
Solution 6 - Javascript	Ben Koehler	View Answer on Stackoverflow
Solution 7 - Javascript	user1714346	View Answer on Stackoverflow
Solution 8 - Javascript	Lance	View Answer on Stackoverflow
Solution 9 - Javascript	Vishal Sharma	View Answer on Stackoverflow
Solution 10 - Javascript	aked	View Answer on Stackoverflow
Solution 11 - Javascript	Qin Wang	View Answer on Stackoverflow
Solution 12 - Javascript	Brian M	View Answer on Stackoverflow
Solution 13 - Javascript	Fabio	View Answer on Stackoverflow
Solution 14 - Javascript	Mike Clark	View Answer on Stackoverflow
Solution 15 - Javascript	Pertr Pavliuk	View Answer on Stackoverflow
Solution 16 - Javascript	chrism	View Answer on Stackoverflow
Solution 17 - Javascript	Chandre Gowda	View Answer on Stackoverflow
Solution 18 - Javascript	Paresh	View Answer on Stackoverflow
Solution 19 - Javascript	prograhammer	View Answer on Stackoverflow
Solution 20 - Javascript	iman64	View Answer on Stackoverflow