How to run a JS function when CSS class is changed

Question

I have an HTML like:

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class=""><a href="#tab1" data-toggle="tab">Edit</a></li>
    <li class="active"><a href="#tab2" data-toggle="tab">Add</a></li>
    <li><a href="#tab3" data-toggle="tab">Details</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="tab1">...</div>
    <div class="tab-pane active" id="tab2">...</div>
    <div class="tab-pane" id="tab3">...</div>
  </div>
</div>

Basically there are tabs. When user clicks on some <li> element, CSS class active is being added to an appropriate div element.

So I want to run a JS function when the first tab is active. How can I do this? Thank you.

And what is changing the class, classes don't change themselves ? — adeneo, Dec 26 '14 at 10:04
the function that will be called, what will it do? maybe there is a better way to achieve that action, possibly with css if we're talking about style changes like hiding and showing etc.. — Wesley Smith, Dec 26 '14 at 10:08
What's wrong with just assigning a click event listener to your first tab? — knitevision, Dec 26 '14 at 10:09
Actually don't know, cause I'm working on the existed project. When clicking on tab, classes are being changed. — user3061137, Dec 26 '14 at 10:11
@knitevision and how can it be done? sorry but i'm totally new in JS — user3061137, Dec 26 '14 at 10:12
I don't think there is an 'onclasschange' event, but there must be a JavaScript that adds the class. So all you need to do is find the code that adds the class, and at that place also execute your code. You could even trigger your own event there to separate the code, but maybe that just complicates things for you. If interested, see [this question](http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) — GolezTrol, Dec 26 '14 at 10:14

Shailesh Katarmal · Answer 1 · 2014-12-26T10:42:17.793

0

Please try this. It will work.

$("li").click(function(){

  if($(this).hasClass('active'))
  {
    alert("hii");
  }

});

edited Dec 26 '14 at 10:42

answered Dec 26 '14 at 10:34

Shailesh Katarmal

2,757
1
12
15

score 0 · Answer 2 · answered Dec 26 '14 at 10:36

Just add the onClick() event to each of your anchors. That way, every time someone clicks on any one of the "nav-tabs", it triggers the javascript event:

e.g:

<li class="active"><a href="#tab2" data-toggle="tab" onClick="runThisFunction()">Add</a></li>

score 0 · Answer 3 · answered Dec 26 '14 at 11:09

0

On user events only you can check if the class is added to the particular div or not there is other way if you are using angular.js, if you want to write using Java Script/Jquery you cannot do that.

answered Dec 26 '14 at 11:09

Naveen Setty

615
5
26

How to run a JS function when CSS class is changed

3 Answers3