Need currently selected tab ID for jQuery tabs

ID : 274489

viewed : 57

Tags : jqueryjquery-uijquery-tabsjquery





Top 5 Answer for Need currently selected tab ID for jQuery tabs

vote vote

97

You can use the :visible pseudo-selector to target the visible panel:

$("#tabs .ui-tabs-panel:visible").attr("id"); 

It's worth noting that you can retrieve the active tab from the activate event:

$("#tabs").tabs({     activate: function (event, ui) {         console.log(ui.newPanel[0].id);     } }); 
vote vote

86

Jonathan Sampson's answer doesn't work anymore. Try...

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle: http://jsfiddle.net/tbEq6/

vote vote

76

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/

vote vote

69

As I posted in an answer to this question, there are several ways to achieve this.

On the jQuery documents, they propose to do the following to find the index of the currently open tab:

var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0 

However, this is impractical if you need to do a lot with that tab. Why they don't yet provide a more practical solution of getting the actual element, I'm unsure, however, through use of jQuery there is an easy solution you can create yourself.

In the following code i'll show you just how easy it is to do anything you want with the current tab:

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),     curTabIndex = curTab.index(),  //  will get you the index number of where it sits     curTabID = curTab.prop("id"),  //  will give you the id of the tab open if existant     curTabCls = curTab.attr("class");  //  will give you an array of classes on this tab         //  etc .... //    now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)'); //    then you can make simple calls to that tab and get whatever data or manipulate it how you please curTab.css("background-color", "#FFF"); 
vote vote

59

After JQuery 1.9 selected is deprecated

So use

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

Top 3 video Explaining Need currently selected tab ID for jQuery tabs







Related QUESTION?