Clever Geek Handbook

How can I get the id of the currently selected jQuery UI tab?

I know that I can get the (numeric) 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 the event handler? By "ID" I mean the string property (ui.panel.id) in the ui object passed as an argument to the event listener callback, but I am trying to do this outside of the callback.

I know I can hack my own solution, but I want to make sure I don't reinvent the wheel first.

I'd rather work with identifiers than indices, so changing the order of my tabs didn't break my code - it's at least a little more reliable and readable.

+2


source to share


2 answers


As far as I know, the selected tab has a ui-tab-selected class. you can use

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


to select the selected tab. It was an element where the href attribute is the id of the active panel.

+1


source


@Matt Ball

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



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

'# ui-tabs-widget' is the ID of your actual tab widget, so replace it with that so that the active tab is only selected in the widgets you wanted, not every one on the page.

+1


source






More articles:


All Articles