JQuery UI tabs: get current tab index

Question

I want to get the index of the current tab using jQuery UI tabs: especially when show or select events are fired. I want to know that the referenced taba is possible?

Answer 1

 $('#tabs').tabs({ select: function(event, ui) { // select event $(ui.tab); // the tab selected ui.index; // zero-based index }, show: function(event, ui) { // show event $(ui.tab); // the tab shown ui.index; // zero-based index } }); 

Demo

---

Or, if you do not want to bind event listeners during initialization, you can bind them as follows:

 $('#tabs') .bind('tabsselect', function(event, ui) { // select event $(ui.tab); // the tab selected ui.index; // zero-based index }) bind('tabsshow'. function(event, ui) { // show event $(ui.tab); // the tab shown ui.index; // zero-based index }); 

Answer 2

You can use this to find

 var $tabs = $('#tab').tabs(); var selected = $tabs.tabs('option', 'selected'); 

From jQuery 1.9 to

 var $tabs = $('#tab').tabs(); var selected = $tabs.tabs('option', 'active'); 

Answer 3

I just implemented this in one of my projects:

 var lastTab = 0; // global variable $(function() { $('#tabs').tabs({ select: function(event, ui) { lastTab = ui.index; } }); }); 

And then somewhere else in your code you can just refer to lastTab .

Answer 4

For jQuery 1.9 or later ...

 $('#tabs').tabs({ activate: function(event, ui) { ui.newTab.index(); // zero-based index } });