Discussion :

[yamatoshi]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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;

[RomainVALERI]

Mon problème est que ma fonction marche bien.

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

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
box.className="newclass"

par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^)

[yamatoshi]

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

[yamatoshi]

Merci Romain je vais tester cela !

[yamatoshi]

Merci Romain mais avec ta solution il y a deux soucies :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[yamatoshi]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[andry.aime]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="" name="link" id="link1" class="defaut" onclick="ChangeClass('link1');return false;"></a>

[RomainVALERI]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[yamatoshi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[RomainVALERI]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>