获取jQuery UI选项卡中的当前选项卡

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

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

Answer 2

在jQuery 1.9+的情况下使用以下内容，

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

Answer 3

对于JQuery UI 1.11+，这对我有用 ：

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

Answer 4

⚡ worked for me this way ⚡

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

Answer 5

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.

Answer 6

//for getting selected tabs

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

Answer 7

对我有用的是：

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

Answer 8

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 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.

Answer 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.

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

Answer 12

Here is one simple method.

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

This will return the current tab ID.