javascript - call the same jQuery function in multiple link <a> -
i not familiar jquery. idea link href="..?episode=1"
will add class active
, while other link not add class active link href='..?episode=2"
added class active
, while other link not active add class similar other links. have code html
<ul id="episode"> <li><a href="index.php?episode=1" class="active">1</a></li> <li><a href="index.php?episode=2">2</a></li> <li><a href="index.php?episode=3">3</a></li> <li><a href="index.php?episode=4">4</a></li> </ul>
code js
$(document).ready(function() { $("a").click(function(){ if($("a").text()!="1"){ $("a.active1").removeclass("active1"); $("a").addclass("active1"); alert($(this)).text(); } }) })
the problem when 1 episode selected, message pops 2 times , class added , removed.i not know reason is? there can tell me 1 way no solution
use snippet:
what remove active class a
elements , adds active class clicked one.
$(document).ready(function() { $("a").click(function(){ $("a").removeclass("active"); $(this).addclass("active"); alert($(this).text()); }); });
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="episode"> <li><a href="#" class="active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>
i have changed href
work here, feel free use original html layout.
Comments
Post a Comment