jquery - jQuery - アクティブなタブを見つける

Question

タブのリストがあります：

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

次に、ボタンがあります：

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

ボタンをクリックしたときに、クラスがアクティブな要素にアクセスするにはどうすればよいですか? アクティブなアイテムからデータ ID を取得できる必要があります。

だから、このようなもの...（これはうまくいきません！）

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

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

});

Answer 1

バージョン以降、live() jQueryメソッドは非推奨になっていることに注意してください。代わりにメソッド ( on() jquery documentation1.7 ) を使用し、セレクターを次のように変更する必要があります。on() jQueryCSS

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

また、activeクラスがオプション ( 0to 1. Not n) の場合は、たとえば要素が存在するかどうかを確認する必要がありますactive(簡単な方法です)。

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

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