Basculer la class d'un élément en js

Version imprimable

Bonjour,

J'ai créé une fonction js qui me permet de changer la class css d'un lien.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 Dans mon head : function ChangeClass(id) { var box= document.getElementById(id) box.className="newclass" Dans mon body <a href="javascript:;" class="defaut" id="box1" onClick="changeClass('box1')">lien1</a> <a href="javascript:;" class="defaut" id="box2" onClick="changeClass('box2')">lien2</a> <a href="javascript:;" class="defaut" id="box3" onClick="changeClass('box3')">lien3</a>
Mon problème est que ma fonction marche bien. Lorsque je clic sur un lien il me change bien ma class mais j'aimerais que lorsque je clic sur un second lien, qu'il me remette la classe du premier lien cliqué à défaut et le second lien cliqué soit bien changé. Une idée ?

Merci

06/04/2009, 12h01
javatwister

disons qu'il n'y a pas vraiment besoin de js pour changer la classe d'un lien;

et puis "Onclik" n'existe pas;
06/04/2009, 12h10
RomainVALERI
Citation:

Envoyé par yamatoshi

Mon problème est que ma fonction marche bien.

Merci, grâce à toi je viens de trouver ma "phrase du jour" :mouarf:

Et... à part ça : attention avec className, je crois qu'IE6 ne comprend que "class", qui est malheureusement aussi un mot réservé de js ... :aie: :aie: :aie: donc si tu rencontres des problèmes, pense à essayer de remplacer
Code:

1 2 box.className="newclass"
par
Code:

1 2 3 4 // le "document.all" n'est ici qu'un exemple, c'est pour dire : "spécifique IE" ^^ if (document.all) box.setAttribute("class", "newclass"); else box.setAttribute("className", "newclass");
Enfin : pour que tes liens (non cliqués) redeviennent comme ils sont par défaut, modifie un peu ta fonction changeClass :
Code:

1 2 3 4 5 function ChangeClass(id) { var liens = document.getElementsByTagName("A"); for (var i = 0 ; i < liens.length ; ++i) liens[i].className = ((liens[i].id = id)?"newclass":"oldclass"); }
ps : attention dans ton extrait de code les accolades de ton bloc de fonction ne sont pas fermées... (peut-être une simple erreur de copier-coller ^^)
06/04/2009, 12h13
yamatoshi

Citation:

Envoyé par javatwister

disons qu'il n'y a pas vraiment besoin de js pour changer la classe d'un lien;

et puis "Onclik" n'existe pas;

Ah oui explique moi alors comment tu fais mister javatwister. Si tu parles de le faire en CSS ça ne joue pas pour moi car en utilisant

A:link {}
A:hover { }
A:active { }
ou
A:visited { }

ça ne réalise pas la fonction que je souhaite. Car si j'utilise visited ben tous les liens sur lesquels j'aurais cliquer vont changer de class. Alors que moi je souhaite, si je clik sur le lien 1, il change de classe, si je clik sur un lien 2, le lien 1 revient à la classe par défaut et le lien 2 prend la nouvelle classe. Il faut donc un javascript je pense ???
06/04/2009, 12h16
yamatoshi

Merci Romain je vais tester cela !
06/04/2009, 14h18
yamatoshi
Merci Romain mais avec ta solution il y a deux soucies :
Code:

1 2 3 4 function ChangeClass(id) { var liens = document.getElementsByTagName("A"); for (var i = 0 ; i < liens.length ; ++i) liens[i].className = ((liens[i].id = id)?"newclass":"oldclass"); }
Le premier c'est que vu que dans mon document j'ai plusieurs a href du coup il change tous de class. Ensuite lorsque je reclick sur le lien, il ne revient pas à la class par défaut...:?

Bon après tout une matinée de recherche. Voici une solution. Elle peut être pas optimisé mais en tous cas, elle marche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function ChangeClass(id) {
 
var liens = document.getElementsByName("link");
	 for (var i = 0 ; i < liens.length ; ++i) 
	 liens[i].className = "defaut";
 
 
var idlink=id;
var hover = document.getElementById(idlink);
		hover.className="hover"
}

Ensuite dans mon lien j'ai placé :

Code:

1
2
3
<a href="javascript:;" name="link" id="link1" class="defaut" onClick="ChangeClass('link1'"></a>
<a href="javascript:;" name="link" id="link2" class="defaut" onClick="ChangeClass('link2'"></a>
<a href="javascript:;" name="link" id="link3" class="defaut" onClick="ChangeClass('link3'"></a>

06/04/2009, 15h19
andry.aime

Bien que ça marche, enlève "javascript:;" des href

Code:

<a href="" name="link" id="link1" class="defaut" onclick="ChangeClass('link1');return false;"></a>
06/04/2009, 15h54
RomainVALERI
Citation:

Envoyé par yamatoshi

Le premier c'est que vu que dans mon document j'ai plusieurs a href du coup il change tous de class.

Mais tu n'avais pas précisé que ton problème se limitait à une partie des liens de la page ;)
Ce n'est pas grave il y a des moyens pour éviter cela.
Imaginons que l'extrait que tes liens soient contenus dans un <div> dont l'id est "liens" :
Code:

1 2 var liens = document.getElementById("liens").getElementsByTagName("A");

Merci Romain mais ta solution ne fonctionne pas car mes liens sont encapsulés dans des ul li. Mais peu importe car même si je mets des div, le code que tu m'as donné n'a aucun effet sur mes class. Du coup en bidouillant, je suis arrivé à celle que j'ai donné plus haut qui marche mais je ne pense pas qu'elle soit optimisée !

Voici la fonction que j'avais utilisé précédemment en fonction de ta solution. Mes deux liens ayant un même name, je récupère bien un tableau. Par contre le changement de classe ne fonctionne pas. Lorsque je clik sur un premier lien il bascule bien vers newclass mais quand je clik sur un autre lien, le lien précédent reste toujours à newclass mais ne bascule pas vers la class defaut ! :?

Tu peux copier coller l'ensemble du code pour voir ce que ça donne !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//@IMPORT url("");EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>link</title> <script type="text/javascript"> function ChangeClass() { var id var liens = document.getElementsByTagName("a"); for (var i = 0 ; i < liens.length ; ++i) liens[i].className = ((liens[i].id = id)?"defaut":"newstyle"); } </script> <style type="text/css"> .defaut{ font-size:20px; color:red; } .newstyle{ font-size:20px; color:green; } </style> </head> <body> <b>Objectif</b><br /> Lorsque je click sur le lien 1, il prend la classe newstyle. Lorsque je click sur le lien 2. Le lien 1 reprend le par defaut et le lien 2 prend newstyle. <ul> <li><a href="#" name="link" class="defaut" id="link1" onClick="ChangeClass('link')">Lien 1</a></li> <li><a href="#" name="link" class="defaut" id="link2" onClick="ChangeClass('link')">Lien 2</a></li> </ul> </body> </html>

Non, ca ne peut pas marcher comme ça en effet ^^

Code:

1
2
3
4
5
6
function ChangeClass() {
 	var id
   var liens = document.getElementsByTagName("a");
   for (var i = 0 ; i < liens.length ; ++i) liens[i].className = ((liens[i].id = id)?"defaut":"newstyle");
}

Pourquoi avoir supprimé le paramètre "id" de ta fonction ?
Tu déclares la variable "id" dans la fonction mais elle ne contient rien donc le test qui suit ne peut pas fonctionner : il faut que la variable id contienne l'id du lien cliqué...
Et si tu veux éviter que tous les liens de ta page soient impactés, donne un id à ton <ul> pour restreindre le champ de départ du getElementsByTagName :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//@IMPORT url("");EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link</title>
<script type="text/javascript">
function ChangeClass(id) {
   var liens = document.getElementById("ul_liens").getElementsByTagName("a");
   for (var i = 0 ; i < liens.length ; ++i) liens[i].className = ((liens[i].id = id)?"defaut":"newstyle");
}
</script>
<style type="text/css">
.defaut{
font-size:20px;
color:red;
}
 
.newstyle{
font-size:20px;
color:green;
}
 
</style>
</head>
<body>
<b>Objectif</b><br />
Lorsque je click sur le lien 1, il prend la classe newstyle. Lorsque je click sur le lien 2. Le lien 1 reprend le par defaut  et le lien 2 prend newstyle.
<ul id="ul_liens">
<li><a href="#" name="link" class="defaut" id="link1" onClick="ChangeClass('link1')">Lien 1</a></li>
<li><a href="#" name="link" class="defaut" id="link2" onClick="ChangeClass('link2')">Lien 2</a></li>
</ul>
</body>
</html>