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");

附注：从版本1.7开始，不推荐使用live()。 on()是新的热点。

Answer 2

尝试而不是直播：

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

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

});

Answer 3

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

       });
});

这是我的TAB列表

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

正如其他人已经提到的那样：自从jQuery v1.7起，不推荐使用live（）方法。

这应该有效：

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

Answer 5

请注意，live() jQuery方法自1.7版以来deprecated。您应该使用on() jQuery方法（on() jquery documentation）并更改CSS选择器，如下所示：

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

如果active类是可选的（0到1。不是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 6

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

jQuery - 查找活动选项卡

6 个答案: