Comment faire pour ajouter une classe à l'aide de jQuery?
J'ai fait une petite fonction dont le travail à faire ajouter une classe dans <li>
quand on clique sur <li>
, mais je veux le supprimer si il est déjà eu avec <li>
.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 22 May 2012 12:39:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.main').find('li').each(function(){
$(this).live('click', function (){
$(this).addClass('active')
})
})
})
</script>
</head>
<body>
<ul class="main">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
</body>
</html>
Vous devez vous connecter pour publier un commentaire.
Vous pouvez simplement utiliser
toggleClass
cela permettra d'ajouter ou de supprimer en tant que de besoinsi vous souhaitez supprimer cette classe d'ailleurs, vous pouvez ajouter une ligne supplémentaire:
Utiliser la fonction jquery
.toggleClass
.Cela devrait faire l'affaire 😉
http://api.jquery.com/toggleClass/
$('.main li.active').removeClass('active')