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 of the dialog buttons. Looking at the HTML generated by jQuery UI tabs and dialog, I can't really find a way of doing this. The <ul> elements that hold the tab, are about 3 <div>'s away from the group of dialog buttons.

I tried:

$("#DialogBox").dialog({
    autoOpen: false,
    modal: true,
    buttons: [
        {
        text: "Save",
        click: function () {
        var currentTabId = $(this).closest("ul").attr("id");
        alert(currentTabId);

But I just get an 'undefined' alert back.

Is there a way of doing this?

Thanks

Answer 1

Here is one simple method.

 var id = $(".tab-pane").attr("id");                   
 alert(id);

This will return the current tab ID.

Answer 2

(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 3

Use following in case of jQuery 1.9+,

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

Answer 4

Asume that ui tabs container's id is tab-container. Working snippet is

$('#tab-container').find('>div:nth-of-type(' + ($('#tab-container').tabs("option", "active") + 1) + ')'); 

Tested with jQuery UI v1.11.2, jQuery v1.11.3 and Chrome 45.

Answer 5

For JQuery UI 1.11+ this worked for me:

$("ul>.ui-tabs-active").attr('aria-controls');

Answer 6

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.