jQuery UI选项卡：获取当前选项卡索引

Question

我想使用jQuery UI选项卡获取当前选项卡的索引：特别是当show或select事件被触发时，我想知道这个选项卡是否可以参考？

Answer 1

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

Answer 2

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

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

Answer 4

For jQuery 1.9 or newer...

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