get the current tab in jQuery UI tabs

问题:

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

回答1:

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.

回答2:

This is what worked for me (jQuery 1.9, jQueryUI 1.10). I have not tested this for earlier versions of jQueryUI, but if you have jQueryUI 1.8 or earlier, instead of 'active' try using 'select'.

// GET INDEX OF ACTIVE TAB
// make sure to replace #tabs with the actual selector
// that you used to create the tabs
var activeTabIdx = $('#tabs').tabs('option','active');

// ID OF ACTIVE TAB
// make sure to change #tabs to your selector for tabs
var selector = '#tabs > ul > li';
var activeTabID = $(selector).eq(activeTabIdx).attr('id');

// ID OF ACTIVE TAB CONTENT
// make sure to change #tabs to your selector for tabs
var selector = '#tabs [id=ui-tabs-' + (activeTabIdx + 1) + ']';
var activeTabContentID = $(selector).attr('id');

回答3:

Use following in case of jQuery 1.9+,

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

回答4:

For JQuery UI 1.11+ this worked for me:

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

回答5:

⚡ worked for me this way ⚡

var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);

回答6:

here is the correct one and the simplest:

var active = $(".tab-pane.active").attr("id");
console.log(active);

You should add active selector next to tab-pane. This will return the current active tab ID.

回答7:

//for getting selected tabs

var tabs = $("#tabs").children().find(".current").attr('href');

回答8:

What worked for me was:

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

回答9:

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.

回答10:

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.

回答11:

(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);

回答12:

Here is one simple method.

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

This will return the current tab ID.