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>