how do i check which tabs is active using jquery tabs?

Question

score 12 · Accepted Answer · answered Oct 29 '10 at 04:42

12

Please try with Index

 function getIndex(){
     return $("ul li.ui-state-active").index();
    }

It will returns the index of selected li or tab.

answered Oct 29 '10 at 04:42

kbvishnu

score 2 · Answer 2 · answered Oct 19 '12 at 05:32

2

I needed to get the active tab during the activate event. I was able to do this using the option active call.

$('#tabs').tabs({
    activate: function (event, ui) {
        var activeTabId = $(this).tabs('option', 'active');
    }
});

answered Oct 19 '12 at 05:32

Chris Porter

score 1 · Answer 3 · answered Jul 28 '14 at 15:07

1

I'm using something like this:

$tabContainer.tabs({
    activate: function (event, ui) {
        if (ui.newPanel.is("#TabId")) {
            // do sth here
        }
    }
});

answered Jul 28 '14 at 15:07

Paweł Olesiejuk

score 1 · Answer 4 · answered Oct 29 '10 at 04:14

1

Not too sure about this but I think jQuery dynamically assigns a class of 'ui-state-active'

answered Oct 29 '10 at 04:14

sk747

Correct, jQuery adds the class `ui-state-active` to the active tab. See http://jqueryui.com/demos/tabs/ with Firebug to see how it works. – Scott Oct 29 '10 at 04:21
i need to check it programmatically, so i can do actions related to that – Bart Oct 29 '10 at 04:35
var selected = $tabs.tabs('option', 'selected'); // => 0 – Bart Oct 29 '10 at 04:36

score 0 · Answer 5 · answered Oct 28 '15 at 07:15

0

var selectedTabIndex = 0;
jQuery("#tabContainer").tabs({
 select: function(event, ui) { 
  selectedTabIndex = ui.index; 
 }
});

You can use selectedTabIndex in your app

answered Oct 28 '15 at 07:15

kalpesh patil

score 0 · Answer 6 · answered Jun 22 '11 at 14:23

0

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

answered Jun 22 '11 at 14:23

Bartek

1

The selected option is delayed by 1 click if you are accessing the value in the activate event. – Chris Porter Oct 19 '12 at 05:29

6 Answers6