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?

Contra · Answer 1 · 2013-07-12T13:41:17.123

205

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

edited Jul 12 '13 at 13:41

answered Aug 26 '09 at 14:52

Contra

2,754
4
20
18

2

That appeared to be what I needed, anyway. – El Yobo Apr 10 '10 at 15:10
2

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? http://jqueryui.com/demos/tabs/#option-selected – Patrick Szalapski Dec 09 '11 at 20:31
9

The 'selected' option has been renamed to 'active' in jQuery UI version 1.9 (see http://jqueryui.com/changelog/1.9.0) – jake Oct 21 '12 at 15:27

score 75 · Accepted Answer · edited May 23 '17 at 12:02

75

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.

edited May 23 '17 at 12:02

Community

1
1

answered Nov 18 '08 at 21:39

redsquare

78,161
20
151
159

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 '08 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 '08 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. – Mark Struzinski Nov 19 '08 at 02:23
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. – Ryan Nov 05 '09 at 05:00
4

The answer is there - use ui.index property to get the current index in the tabselect event..... – redsquare Nov 05 '09 at 12:27
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. – Patrick Szalapski Dec 09 '11 at 20:33
@Patrick Szalapski $('#TabContainer').tabs("option", "selected"); – redsquare Dec 12 '11 at 01:14
@redsquare, that doesn't work--it only gives me the "default" selected tab, not the dynamically changing selected tab. – Patrick Szalapski Dec 12 '11 at 14:53
can you knock up a demo at jsfiddle. $('#TabContainer').tabs("option", "selected"); should give you the current selected tab – redsquare Dec 12 '11 at 16:04
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 (http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-event-renamed-to-beforeactivate) – Giorgio Luparia Oct 19 '12 at 08:46
@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 – redsquare Oct 19 '12 at 09:19
@redsquare 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? – Giorgio Luparia Oct 19 '12 at 09:33
@Giorgio Luparia you could do yeah - versioning is something SO needs to sort out - instead the mods would rather close questions all day!! – redsquare Oct 19 '12 at 11:27

score 45 · Answer 3 · answered Oct 19 '12 at 11:32

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.

answered Oct 19 '12 at 11:32

Giorgio Luparia

846
8
9

6

It would be great if you could flesh out your answer with some additional detail. – Sledge Oct 06 '17 at 14:33

SpYk3HH · Answer 4 · 2016-08-20T20:12:12.060

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.

Excellent, thanks! If you want you could also provide this as an answer to http://stackoverflow.com/q/1864219/11992. — nikow, Nov 22 '11 at 13:49
The 'selected' option has been renamed to 'active' in jQuery UI version 1.9 (see jqueryui.com/changelog/1.9.0). — jake, Oct 21 '12 at 15:30

score 14 · Answer 5 · edited May 01 '13 at 19:59

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

edited May 01 '13 at 19:59

KreepN

8,528
1
40
58

answered Mar 12 '13 at 13:31

MeneerBij

309
2
6

score 12 · Answer 6 · answered Nov 19 '08 at 02:29

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.

answered Nov 19 '08 at 02:29

Ben Koehler

8,633
3
23
23

@Ben : your solution gives the previous selected tab as that was the index when the tabsselect event was triggered. – Michael Mao Feb 19 '10 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')) – Ben Koehler Feb 21 '10 at 01: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. – Michael Mao Feb 24 '10 at 02:36

score 6 · Answer 7 · answered Feb 08 '13 at 18:35

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

score 5 · Answer 8 · answered Apr 03 '13 at 13:39

5

the easiest way of doing this is

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

and for index

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

answered Apr 03 '13 at 13:39

Vishal Sharma

2,773
2
24
36

score 5 · Answer 9 · edited Mar 11 '12 at 07:12

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.

score 4 · Answer 10 · answered Jul 11 '13 at 17:53

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

score 4 · Answer 11 · edited Sep 09 '13 at 22:31

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

edited Sep 09 '13 at 22:31

nhahtdh

55,989
15
126
162

answered Sep 09 '13 at 22:23

Brian M

41
1

Qin Wang · Answer 12 · 2013-06-10T09:46:21.317

3

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

then you will have the index of tab from 0

simple

edited Jun 10 '13 at 09:46

answered Mar 21 '13 at 14:20

Qin Wang

422
4
12

score 3 · Answer 13 · answered Sep 29 '15 at 07:27

3

You can post below answer in your next post

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

answered Sep 29 '15 at 07:27

Mike Clark

1,860
14
21

This answer is useful to find the current active tab, particularly when not in the context of a tab selection event. – hrabinowitz Nov 02 '15 at 19:17

score 2 · Answer 14 · answered May 20 '20 at 13:26

2

You can find it via:

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

answered May 20 '20 at 13:26

Pertr Pavliuk

373
3
8

score 2 · Answer 15 · edited Mar 11 '12 at 07:12

2

Try the following:

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

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

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

edited Mar 11 '12 at 07:12

Mike G

746
5
19

answered Mar 05 '12 at 16:23

Fabio

21
1

Chandre Gowda · Answer 16 · 2013-04-19T08:55:52.483

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

edited Apr 19 '13 at 08:55

answered Apr 19 '13 at 05:22

Chandre Gowda

870
1
7
24

score 1 · Answer 17 · answered Oct 26 '11 at 03:29

1

Another way to get the selected tab index is:

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

answered Oct 26 '11 at 03:29

chrism

95
6

score 0 · Answer 18 · answered Sep 30 '14 at 00:36

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/

score 0 · Answer 19 · answered Dec 10 '10 at 09:12

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

answered Dec 10 '10 at 09:12

Paresh

25
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... – Justin Ethier Dec 22 '11 at 15:47

score 0 · Answer 20 · answered Aug 05 '18 at 14:46

0

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

answered Aug 05 '18 at 14:46

iman64

1
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?](https://stackoverflow.com/help/how-to-answer) – sɐunıɔןɐqɐp Aug 05 '18 at 15:05

jQuery UI Tabs - How to Get Currently Selected Tab Index

20 Answers20

Linked