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

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 2

⚡ worked for me this way ⚡

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

Answer 3

//for getting selected tabs

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

Answer 4

For JQuery UI 1.11+ this worked for me:

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

Answer 5

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