jQuery - Tìm active tab

Question

Tôi có một danh sách các tab:

<ul class="tabs"> 
<li><a data-id="1" href="#">AAA</a></li> 
<li><a data-id="2" href="#" class="active">BBB</a></li> 
<li><a data-id="3" href="#">CCC</a></li> 
</ul> 

Sau đó, tôi có một nút:

<div id="button">Click Me</div> 

Làm thế nào tôi có thể, khi nhấp chuột vào nút, truy cập vào các yếu tố có lớp học hoạt động? Tôi cần có thể lấy id dữ liệu từ mục đang hoạt động.

Vì vậy, một cái gì đó như thế này ... (điều này không làm việc!)

$("#button").live("click", function(){ 

     var ref_this = $("ul.tabs li a").find(".active"); 
     alert(ref_this.data("id")); 

}); 

Answer 1

Bạn đã chọn a, và find() tìm kiếm hậu duệ . Hãy thử thay vào đó:

var ref_this = $("ul.tabs li a.active"); 

Ghi chú bên: live() không được dùng như phiên bản 1.7. on() là điểm nóng mới.

Answer 2

Thử thay vì trực tiếp:

$("#button").on("click", function(){ 

     var ref_this = $("ul.tabs li a").find(".active"); 
     alert(ref_this.data("id")); 

}); 

Answer 3

Như những người khác đã đề cập: kể từ jQuery v1.7 phương thức live() không được chấp nhận.

này nên làm việc:

$('#button').on('click', function() { 
    var active_button = $('.tabs li a.active'); 
});` 

Answer 4

Hãy cẩn thận, live()jQuery phương pháp là deprecated kể từ phiên bản 1.7. Bạn nên sử dụng on()jQuery phương pháp để thay thế (on() jquery documentation) và thay đổi selector CSS của bạn như thế này:

$('#button').on('click', function(){ 
    var ref_this = $('ul.tabs li a.active'); 
    alert(ref_this.data('id')); 
}); 

Và nếu lớp active là tùy chọn (0-1 Không n.), Bạn nên kiểm tra xem có tồn tại một yếu tố active ví dụ (chỉ là một cách đơn giản để làm):

$('#button').on('click', function(){ 
    var ref_this = $('ul.tabs li a.active'); 

    if(ref_this) 
     alert(ref_this.data('id')); 
    else 
     alert('There is no active element'); 
}); 

Answer 5

var activeTab = "AAA"; 
    $("li").click(function(){ 
    activeTab = $(this).text(); 
    });