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

Question

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

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

---

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

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

你可以用它来找到

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

从JQuery的1.9上

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

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