CODEWITHSUNDEEP
jquery
TiagoSouEu
TiagoSouEu

Reputation: 163

jQuery - Find active tab

I have a list of tabs:

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

Then I have a button:

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

How can I, when click on the button, access the element that have the class active? I need to be able to get the data-id from the active item.

So, something like this... (this doesn't work!)

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

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

});

Upvotes: 15

Views: 81517

Answers (6)

Utpal Patel
Utpal Patel

Reputation: 21

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

       });
});

Here is my TAB list

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

and button over here

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

Upvotes: 2

Darshit Gandhi
Darshit Gandhi

Reputation: 79

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

Upvotes: -3

deformhead
deformhead

Reputation: 109

Be careful, live() jQuery method is deprecated since 1.7 version. You should use on() jQuery method instead (on() jquery documentation) and change your CSS selector like this :

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

And if the active class is optional (0 to 1. Not n), you should check if there exists an active element for example (just a simple way to do) :

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

Upvotes: 0

Robin
Robin

Reputation: 915

As the others have already mentioned: since jQuery v1.7 the live() method is deprecated.

This should work:

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

Upvotes: 0

Jason P
Jason P

Reputation: 27022

You already selected the a, and find() searches descendants. Try this instead:

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

Side note: live() is deprecated as of version 1.7. on() is the new hotness.

Upvotes: 19

Evets Rezik
Evets Rezik

Reputation: 122

Try on instead of live:

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

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

});

Upvotes: 1

Related Questions