get the current tab in jQuery UI tabs

Question

I am using jQuery UI Tabs inside of the jQuery UI dialog window.

I\'ve come across an instance, where I need to find the id of the current tab when clicking on one o

Answer 1

What worked for me was:

var current_tab = $("#tabs .ui-state-active a").attr('href');

Answer 2

Use following in case of jQuery 1.9+,

var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");

Answer 3

According to manual http://api.jqueryui.com/tabs/ getter of active JqueryUI tab is

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

*Replace ".selector" by your one.

Then active.attr( 'id' ) will return exactly what you need.

Answer 4

(This answer is relevant for JQuery UI 1.12 and probably a few versions before.)

It depends what you mean by tab... There is the thing that you click to select a tab and the panel that is displayed because of the click. The thing you click is a list item <li> that contains an anchor <a> tag with an href attribute that points to the panel id (it's prepended with a '#'). The panel id and href values are set by you (not JQuery). The list item has no id by default, but the anchor element does... it is generated by JQuery and will be something like 'ui-id-88'. To get either the tab id, anchor id or the panel id, you can use the following:

// if you have nested tabs this might not work... in such case, give 
// your parent tab and panel a unique class and use it in selector
var $tabs = $("#tabs");
var tabIndex = $tabs.tabs("option", "active");
var $tab = $tabs.find("li[role=tab]").eq(tabIndex);
var tabId = $tab.attr("id"); // undefined unless set by user
var anchorId = $tab.attr("aria-labelledby"); // or $tabs.find("ul li a.ui-tabs-anchor").eq(tabIndex).attr("id");
var panelId = $tab.attr("aria-controls"); //or $tabs.find(".ui-tabs-panel").eq(tabIndex).attr("id");
// note: panelId will also be in href of anchor with prepended # sign
alert("tabId=" + tabId + ", anchorId=" + anchorId + ", panelId=" + panelId);

Answer 5

This also works, using JQuery 3.1.1 and Jquery UI 1.12.1, when you need to select your active tab in javascript (by "select" I mean in a JQuery selector, not "select" in the sense of making the tab active, since of course the tab is already active).

To get a reference to the currently selected tab, first get a reference to the active link (substitute the id of your tabs container "myTabs"):

var $link = $('div[id=myTabs] ul .ui-tabs-active');

$link has the id the tab in the attribute "aria-controls":

var $tab = $('#' + $link.attr('aria-controls'));

$tab is a reference to the tab body. For example, you could call

$tab.html('[html here]') 

to fill or replace the tab content.