CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Carcamano
Carcamano

Reputation: 1173

In jQuery UI tabs, how do I get the tab element by its tab index?

I have the following JavaScript function to select a tab by its index:

function changeTab(tabIndex) {
    $("#panel").tabs("select", tabIndex);
}

But I have to check if that tab exists and if it's visible, or else it would try to select a tab that shouldn't be available.

For the existence it's fine, I just have to use $("#panel").tabs("length");, but to check if it is visible I would need the element itself.

Upvotes: 2

Views: 6492

Answers (3)

aked
aked

Reputation: 5835

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

Upvotes: 0

Carcamano
Carcamano

Reputation: 1173

It seems there isn't a built-in method for that, but I was able to accomplish it by navigating to the tab:

function changeTab(tabIndex) {
    var panel = $("#panel");
    var queryIndex = tabIndex + 1; // 1 based
    var desiredTab = panel.find("> ul li:nth-child( " + queryIndex + ")");

    if (desiredTab && desiredTab.is(":visible")) {
        panel.tabs("select", tabIndex);
    }
}

Upvotes: 2

Mikael Eliasson
Mikael Eliasson

Reputation: 5227

I haven't tested but you should be able to get the index of the selected tab by

var activeIndex = $("#panel").tabs( "option" , 'selected')

And then you should be able to just very that activeIndex equals tabIndex

Upvotes: 0

Related Questions