Discussion :

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

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

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 :

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

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

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

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 :

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

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 :

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

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 :

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

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

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 :

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

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 :

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

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]

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 :

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

(lienActif = document.getElementById('id_du_premier_lien')).style.color = "#ffffff";// remplacer par la couleur voulue

[Natsirt]

Le top !

Merci beaucoup !