Need currently selected tab ID for jQuery tabs

Question

I know I can get the index of the currently selected tab but can I somehow get to the ID (the equivalent of the ui.panel.id if this were triggered by an tab event...but it's not) of the currently selected tab? I'd prefer not to use the index because ordering of the tabs might change. I prefer not to use the style markups as those may change in future releases. Is there a method for this? If not, can I somehow use the index to access this (maybe even by accessing the panel object first)? Any other ideas?

Answer 1

After JQuery 1.9 selected is deprecated

So use

var active = $( "#jtabs" ).tabs( "option", "active" );

Answer 2

For jQuery UI >= 1.9 you can use ui.newPanel.selector:

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});

Answer 3

If you want the id (or actually the href) from the selected tab, you can use eq() to retrieve the jQuery Object.

You can see an example here: http://jsfiddle.net/svierkant/hpU3T/1/

Answer 4

$("#tabs .ui-state-active a").attr("id");

Answer 5

For jquery version below 1.9:

 <div class="roundedFloatmenu">
        <ul id="unid">
            <li class="titleHover" id="li_search">Search</li>               
            <li class="titleHover" id="li_notes">Notes</li>
             <li class="titleHover active" id="li_writeback">Writeback</li>         
            <li class="titleHover" id="li_attorney">Attorney</li>
        </ul>
    </div 

And you can find the active tab using:

 jQuery('#unid').find('li.active').attr('id')

Answer 6

This works:

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');