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

Question

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

Wunder

Answer 1

Please try with Index

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

It will returns the index of selected li or tab.

Calvaria

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

Shufu

Answer 3

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

Rhinarium

Correct, jQuery adds the class ui-state-active to the active tab. See jqueryui.com/demos/tabs with Firebug to see how it works. – Snowdrop

i need to check it programmatically, so i can do actions related to that – Wunder

var selected = $tabs.tabs('option', 'selected'); // => 0 – Wunder

Answer 4

I'm using something like this:

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

Enforce

Answer 5

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

Additive

The selected option is delayed by 1 click if you are accessing the value in the activate event. – Shufu

Answer 6

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

You can use selectedTabIndex in your app

Accumulate