CODEWITHSUNDEEP
javascriptjquery
Jebathon
Jebathon

Reputation: 4581

JQuery - How can I determine if a specific class has been Toggled?

<div class="tab1"><div>

<div class="tab1 active"></div>

Given the code above how can I tell using jQuery that the tab1 class has been changed or 'made active'

One solution I think there is a better version of is adding a id to the tab1 div and checking if the class has 'active' appended on it.

[psuedocode below]

$('#tab1').click(function() {
   var myClass = $(this).attr("class");
   if(myClass.stringAt(6-12) == active){
       // do something
   }
});

Upvotes: 1

Views: 107

Answers (2)

AGE
AGE

Reputation: 3792

I think you only need to use :visible and :hidden via the is function which can be seen in use below, please note that I wrote it as a unit test so you can, by yourself, test different scenarios and learn from them. Hope it helps!

HTML

<div class="tab1"></div>

<div class="tab1 active"></div>

jQuery 2.1.3

jQuery(document).ready(function(){                       
    if(jQuery(".tab1").is(":visible")){
        alert("tab1 is visible");
    }
    else{
        alert("nothing is :visible");
    }
    if(jQuery(".tab1.active").is(":visible")){
        alert("tab1 active is visible");
    }
    else{
        alert("nothing is :visible");
    }
});

Take a look here for a 'visual' example: jsFiddle

jQuery reference: Determining the state of a toggled element

Upvotes: 1

Zee
Zee

Reputation: 8488

You can use hasClass() to check whether it has the class active. Also note that in your code tab1 is a class and not ID so it should be

$('.tab1').click(function() {//Note that tab1 is a class in your code
  if($(this).hasClass('active')){// Check if the div has the class active or not
   //Do your operation
  })
})

Upvotes: 5

Related Questions