jQuery - Trova scheda attiva

Question

Ho una lista di schede:

<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> 

poi ho un tasto:

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

Come posso, quando fare clic sul pulsante, accedere all'elemento che hanno la classe è attiva? Devo essere in grado di ottenere l'ID dati dall'elemento attivo.

Quindi, qualcosa di simile ... (questo non funziona!)

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

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

}); 

Answer 1

È già stata selezionata la a, e find() Ricerche discendenti . Prova a modificare: nota

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

laterale: live() è deprecato a partire dalla versione 1.7. on() è la nuova hotness.

Answer 2

provare su, invece di vivere:

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

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

}); 

Answer 3

Come gli altri hanno già menzionato: poiché jQuery v1.7 il metodo live() è deprecato.

questo dovrebbe funzionare:

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

Answer 4

Attenzione, live()jQuery metodo è deprecated dal 1.7 versione. Si dovrebbe usare on()jQuery metodo invece (on() jquery documentation) e cambiare la tua selettore CSS in questo modo:

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

E se la classe active è opzionale (0-1 Non n.), Si dovrebbe verificare se esiste un elemento active per esempio (solo un modo semplice per farlo):

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