jQuery UI Tabs - How to Get Currently Selected Tab Index

Question

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?

Barbrabarbuda

Answer 1

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.

Shows

Very nice answer! I included a summary of what you did in the website just to make it easier to get the answer. – Acatalectic

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

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

That's great... your link doesn't work anymore. Why don't you just post the answer so people to come can see the solution as well. – Tangent

The answer is there - use ui.index property to get the current index in the tabselect event..... – Shows

I don't quite understand. How do I get the currently selected tab? $('.selector').tabs('option', 'ui.index') doesn't work because it isn't an option. – Cynar

@Patrick Szalapski $('#TabContainer').tabs("option", "selected"); – Shows

@redsquare, that doesn't work--it only gives me the "default" selected tab, not the dynamically changing selected tab. – Cynar

can you knock up a demo at jsfiddle. $('#TabContainer').tabs("option", "selected"); should give you the current selected tab – Shows

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/…) – Security

@Giorgio Luparia why? Can you imagine everybody having to update their answers for every new release of every framework.....the real issue is questions not being tagged with versions – Shows

@Shows I already submitted an edit for peer review. I'd find it useful to have a general answer saying: for versions below 1.9.0 do this, for versions above do that. But maybe I'm not following a good practice. Should I submit and answer a new identical question/answer, tagged with versions? – Security

@Giorgio Luparia you could do yeah - versioning is something SO needs to sort out - instead the mods would rather close questions all day!! – Shows

Answer 2

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

Malocclusion

That appeared to be what I needed, anyway. – Gumdrop

Looks like this actually gives the default tab, not the currently selected tab. What am I missing? 42 votes can't be wrong, can they? jqueryui.com/demos/tabs/#option-selected – Cynar

The 'selected' option has been renamed to 'active' in jQuery UI version 1.9 (see jqueryui.com/changelog/1.9.0) – Rakish

Answer 3

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.

Security

It would be great if you could flesh out your answer with some additional detail. – Browne

Answer 4

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.

Maze

Excellent, thanks! If you want you could also provide this as an answer to https://mcmap.net/q/188895/-need-currently-selected-tab-id-for-jquery-tabs/11992. – Kirima

The 'selected' option has been renamed to 'active' in jQuery UI version 1.9 (see jqueryui.com/changelog/1.9.0). – Rakish

Answer 5

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

Levalloisian

Answer 6

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.

Anon

@Ben : your solution gives the previous selected tab as that was the index when the tabsselect event was triggered. – Cryoscope

@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')) – Anon

： 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. – Cryoscope

Answer 7

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

Profuse

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

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

Hyperactive

Answer 9

the easiest way of doing this is

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

and for index

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

Tetrapody

Answer 10

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

Essa

Answer 11

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

Sisneros

Answer 12

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

then you will have the index of tab from 0

simple

Typesetter

Answer 13

You can post below answer in your next post

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

Plainlaid

This answer is useful to find the current active tab, particularly when not in the context of a tab selection event. – Cerebrospinal

Answer 14

Try the following:

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

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

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

Absinthism

Answer 15

You can find it via:

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

Gerbil

Answer 16

Another way to get the selected tab index is:

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

Innocency

Answer 17

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

Barcroft

Answer 18

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

Effeminize

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

Answer 19

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/

Countercheck

Answer 20

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

Ingressive

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? – Sebaceous