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

Question

我想使用jQuery UI标签获取当前标签的索引：特别是当show或select事件被触发时，我想知道标签被引用是否可能？

Answer 1

您可以使用它来查找

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

来自JQuery 1.9

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

---

或者，如果你不想在初始化时绑定事件监听器，你可以像这样绑定它们：

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

我刚刚在我的一个项目中实现了这个：

var lastTab = 0; // global variable

$(function() {
    $('#tabs').tabs({ 
        select: function(event, ui) { 
            lastTab = ui.index; 
        } 
    });
});

然后您的代码中的任何其他地方都可以引用lastTab。

Answer 4

对于jQuery 1.9或更新版本...

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