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;

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

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

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