CODEWITHSUNDEEP
javascriptjqueryjquery-ui-tabs
Matt Ball
Matt Ball

Reputation: 360056

How do I get the ID of the currently selected jQuery UI Tab?

I know that I can get the (numerical) index of the currently selected tab like this:

$('.selector').tabs('option', 'selected');

Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.

I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.

I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.

Upvotes: 2

Views: 587

Answers (2)

Diosney
Diosney

Reputation: 10590

@Matt Ball

You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:

var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];

'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.

Upvotes: 1

Anatoliy
Anatoliy

Reputation: 30103

As far as I know, selected tab has class ui-tab-selected. You may use

$('.selector').find('.ui-tab-selected a');

to fetch selected tab. It was element, where href attribute - identifier of active panel.

Upvotes: 1

Related Questions