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?
Need currently selected tab ID for jQuery tabs
Viewed 47127
11 Answers
Jonathan Sampson's answer doesn't work anymore. Try...
$("#tabs .ui-tabs-panel:visible").attr("id");
jsFiddle: http://jsfiddle.net/tbEq6/
I knocked my head against this wall for a while. I have a number of tabs that reference urls mixed in with a bunch of tabs that are populated by javascript code and, therefore, have associated divs (.ui-tabs-panel) that are defined in the markup.
jQuery UI Tabs Widget links tabs with panels using the "aria-labeledby" property of the panel. That property has a value of the anchor contained in the tab. So, for this markup
<ul><li id='tab_1'><a href='ferndorf.php'>I Be Tab_1</a></li></ul>
After attaching the jQuery Tab Widget, you can find the appropriate panel using
panel = $( '.ui-tab-panel[aria-labeledby=' + $( '#tab_1 a' ).attr( 'id' ) + ']' )
vice-versa, you can find the tab associated with the panel using
tab = $( '#' + $( panel ).attr( 'aria-labeledby' ) ).closest( 'li' );
The index of tabs and panels is only related in simple structures.
Have fun.
Related