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

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 2

⚡ worked for me this way ⚡

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

Answer 3

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 4

//for getting selected tabs

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

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

What worked for me was:

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