Supprimer état d'un élément au click d'un autre

Version imprimable

23/03/2011, 16h31
Natsirt

Supprimer état d'un élément au click d'un autre

Bonjour à tous,

L'intitulé n'est pas forcément très clair...
Voila, j'ai un menu (ul, li) et je souhaite sans rechargement de la page, que lorsque je click sur un des liens du menu, le lien change de couleur au moyen du css, et que cet élément ne redevienne dans sa couleur d'origine que lorsque je click sur un autre des liens du menu lequel à son tour changera de couleur.

En gros je voudrais permettre à l'utilisateur de savoir ou il se situe sur le site au moyen du menu, mais sans charger une autre page ( en fait, il n'y a qu'une div qui change au sein de la page lors d'un click)

J'espère avoir été suffisamment claire.

D'avance merci de m'éclairer un peu.

Code:

1
2
3
4
5
6
7
8
var lienActif;
 
function activeLien(elem){
  if(!!lienActif)
    lienActif.style.color = couleurParDefaut;
  lienActif = elem;
  lienActif.style.color = couleurActive;
}

Code:

<a href=# onclick="activeLien(this);gestionDeMonDivEnAjax();">lien</a>

Merci pour la réponse rapide mais j'ai encore quelques soucis qui font que ça ne fonctionne pas. Je suis loin d'être aguerri au javascript. Voila mon code :

Code:

1
2
3
4
5
6
7
8
9
 
<div id="menu">
		    <ul id="nav">
		        <li><a class="ezjax" onclick="activeLien(this);" href="accueil.html">Accueil</a></li>
		        <li><a class="ezjax" onclick="activeLien(this);" href="enbref.html">En bref</a></li>
		        <li><a class="ezjax" onclick="activeLien(this);" href="contact.html">Contact</a></li>
		        <li><a class="ezjax" onclick="activeLien(this);" href="aide.html">Aide au projet</a></li>
		    </ul>
		</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
var lienActif;
 
function activeLien(elem){
  if(!!lienActif)
    lienActif.style.color = #428752;
  lienActif = elem;
  lienActif.style.color = #852956;
}
</script>

un petit oubli ^^

Code:

1
2
3
4
5
6
function activeLien(elem){
  if(!!lienActif)
    lienActif.style.color = "#428752";
  lienActif = elem;
  lienActif.style.color = "#852956";
}

Super ca fonctionne ! Enfin si je souhaite que chaque lien adopte une couleur différente comment procéder ? j'ai essayé de multiplier le code et de changer le nom des variables mais ça ne semble pas fonctionner

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
var lienActif;
 
function activeLien(elem){
  if(!!lienActif)
    lienActif.style.color = "#428752";
  lienActif = elem;
  lienActif.style.color = "#852956";
}
var lienActif2;
 
function activeLien2(elem){
  if(!!lienActif2)
    lienActif2.style.color = "#428752";
    lienActif.style.color = "#428752";
  lienActif2 = elem;
  lienActif2.style.color = "#222222";
}
</script>

Code:

1
2
3
4
5
6
7
8
9
 
<div id="menu">
		    <ul id="nav">
		        <li><a class="ezjax" onclick="activeLien(this);" href="accueil.html">Accueil</a></li>
		        <li><a class="ezjax" onclick="activeLien2(this);" href="enbref.html">En bref</a></li>
		        <li><a class="ezjax" onclick="activeLien(this);" href="contact.html">Contact</a></li>
		        <li><a class="ezjax" onclick="activeLien(this);" href="aide.html">Aide au projet</a></li>
		    </ul>
		</div>

Passe la couleur en param :

Code:

1
2
3
4
5
6
function activeLien(elem, col){
  if(!!lienActif)
    lienActif.style.color = "#428752";
  lienActif = elem;
  lienActif.style.color = col;
}

sans oublier d'ajouter les couleurs voulues (ici valeurs bidon mais à toi de choisir ^^) dans le HTML :

Code:

1
2
3
4
<li><a class="ezjax" onclick="activeLien(this, "#111111");" href="accueil.html">Accueil</a></li>
<li><a class="ezjax" onclick="activeLien(this, "#666666");" href="enbref.html">En bref</a></li>
<li><a class="ezjax" onclick="activeLien(this, "#AAAAAA");" href="contact.html">Contact</a></li>
<li><a class="ezjax" onclick="activeLien(this, "#FFFFFF");" href="aide.html">Aide au projet</a></li>

...et nul besoin de dupliquer la fonction ou la variable globale lienActif :)

24/03/2011, 11h57
Natsirt

Chouet alors, merci !
J'ai le droit d'en poser une dernière :-) ?
Si je veux que le premier lien soit déjà surligné à l'arrivé sur le site ?
24/03/2011, 13h07
Willpower

Citation:

Envoyé par Natsirt

Chouet alors, merci !
J'ai le droit d'en poser une dernière :-) ?
Si je veux que le premier lien soit déjà surligné à l'arrivé sur le site ?

fais-le en css/html non ?

sinon en js, bah tu place un bout de code en fin de page ou dans l’évènement window.onload

Code:

(lienActif = document.getElementById('id_du_premier_lien')).style.color = "#ffffff";// remplacer par la couleur voulue
24/03/2011, 13h48
Natsirt

Le top !

Merci beaucoup !