jQuery UI tabs: get current tab index

Question

I want to get the index of the current tab using jQuery UI tabs: especially when the show or select events are fired i want to know the tab thay are referred is this possible?

Solution 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 don't want to bind the event listeners on the initialization you can bind them like this:

$('#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
    });

Solution 2

You can use this to find

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

From JQuery 1.9 on

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

Solution 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 anywhere else in your code you can simply reference lastTab.

Solution 4

For jQuery 1.9 or newer...

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

View more solutions