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

您已选择a, 并find()搜索后代。试试这个：

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

旁注：live()自 1.7 版起已弃用。on()是新的热点。

Answer 2

$(document).ready(function () {
       $("#tabs").on("click", function (e) {
        //debugger
        //var ref_this = $("ul.tabs li a.active");

        var target = $(e.target).attr("data-id");
        if (target != null)
             alert(target);
        else
             alert('There is no active element');

       });
});

这是我的标签列表

<ul class="nav nav-tabs" id="gtu-tab">
        <li class="active"><a data-id="1" href="#Boys" id="boys-tab" data-toggle="tab">Boys</a></li>
       <li><a data-id="2" href="#Girls" id="girls-tab" data-toggle="tab">Girls</a></li>
</ul>
<div id="tabs" class="tab-content">
       <div class="tab-pane active" id="Boys">
             <p>Hey....</p>
             <p>Boys are here</p>
       </div>
       <div class="tab-pane" id="Girls">
             <p>Hey....</p>
             <p>Girls are here</p>
       </div>
</div>

和按钮在这里

<input id="Div1" type="button" value="Click Me"/>

Answer 3

试穿而不是现场直播：

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

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

});

Answer 4

小心，live() jQuery方法自版本以来已被弃用。1.7您应该改用on() jQuery方法（on() jquery 文档）并像这样更改CSS选择器：

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

正如其他人已经提到的那样：从 jQuery v1.7 开始， live() 方法已被弃用。

这应该有效：

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

Answer 6

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