Các tab giao diện người dùng jQuery: nhận chỉ mục tab hiện tại

Question

Tôi muốn nhận chỉ mục của tab hiện tại bằng cách sử dụng các tab jQuery UI: đặc biệt khi các sự kiện show hoặc select bị kích hoạt.

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

---

Hoặc, nếu bạn không muốn để ràng buộc người nghe sự kiện trên khởi tạo, bạn có thể đeo nó như thế này:

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

Bạn có thể sử dụng để tìm thấy

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

Từ JQuery 1.9 trên

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

Answer 3

tôi chỉ thực hiện điều này trong một trong những dự án của tôi:

var lastTab = 0; // global variable 

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

Và rồi bất cứ nơi nào khác trong mã của bạn, bạn chỉ đơn giản là có thể tham khảo lastTab.

Answer 4

Đối với jQuery 1.9 hoặc mới hơn ...

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