Selected tab id?

Question

I have the following script that gets the index of the selected tab:

http://jsfiddle.net/oshirowanen/eWncA/

Is it possible to get an identifier if li has id. If it is easier to get it from another place, then it will also be good, i.e. Related div tags or somewhere else.

Answer 1

jQuery UI just adds a class to the selected li. You can simply pull li with the selected class as follows:

var id = $("li.tab.ui-tabs-selected").attr("id"); 

If you want to get one of the unselected tabs, you can do something like this:

 var id = $("li.tab:not(.ui-tabs-selected)").first().attr("id"); 

Working example:

http://jsfiddle.net/UBs9m/2/

Answer 2

 var id = $("li.tab:eq("+selected+")").attr('id'); 

Answer 3

If you can just use the select event handler to manage your tabs, this works fine:

 $('#tabs').tabs({ select: function( evt, ui ) { console.log( $(ui.panel).attr( 'id' ) ); } }); 

In addition, here is a convenient link for various properties of the ui object.

Answer 4

If you use jquery tabs (new version):

 <div id="tabs"> <ul> <li data-value="tab1"><a href="#tab1">Name of tab1</a></li> <li data-value="tab2"><a href="#tab2">Name of tab2</a></li> </ul> <div id="tab1"> </div> <div id="tab2"> </div> </div> //get id in init $(function () { $("#tabs").tabs({ activate: function(event ,ui) { var id = $(ui.newPanel).prop('id'); } } ); }); var id = $("#tabs li.ui-state-active").attr('data-value'); //get id in other function 

Answer 5

If you come here via Google, like me, and use jQuery UI 1.9.X, use the activate or beforeActivate events to get the id :

 $('selector').tabs({ activate: function(e, ui) { var id = $(ui.newPanel).prop('id'); } }); 

Documentation