Supprimer état d'un élément au click d'un autre [Résolu]

[Natsirt]

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.

[Willpower]

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

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

[Natsirt]

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>

[RomainVALERI]

un petit oubli ^^

Code javascript :

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

[Natsirt]

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>

[RomainVALERI]

Passe la couleur en param :

Code javascript :

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

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

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

[Willpower]

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

[Natsirt]

Le top !

Merci beaucoup !