如何在更改CSS类时运行JS函数

I have an HTML like:

我有一个像这样的HTML:

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

基本上有标签。当用户单击某个

元素时,CSS类active将被添加到适当的div元素中。

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

所以我想在第一个选项卡处于活动状态时运行JS函数。我怎样才能做到这一点?谢谢。

3 个解决方案

#1

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:

只需将onClick()事件添加到每个锚点即可。这样,每当有人点击任何一个“nav-tabs”时,它就会触发javascript事件:

e.g:

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

#2

Please try this. It will work.

请试试这个。它会工作。

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

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

});

#3

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.

在用户事件上,您可以检查是否将类添加到特定div中,如果您使用angular.js,还有其他方法,如果您想使用Java Script / Jquery编写,则无法执行此操作。

#1