.jpg)
Un lecteur m’a écrit afin de savoir s’il était possible de gérer l'élément actif de son menu du côté client lorsque celui-ci change de page. Ce lecteur veut en fait que l'élément de son menu représentant la page active soit d'une couleur différente et que celui-ci reprenne ça couleur lorsqu'il clique sur un autre lien de son menu. Et bien, pour ce lecteur, voici la solution à votre problème.
Vous avez certainement vu cet effet sur beaucoup de sites web. Plusieurs techniques s'offrent à vous. La plus part du temps, on fait cette technique du côté serveur, mais ici nous allons voir une méthode du côté client. Grâce à DOM il sera facile d'effectuer ce que l'on désire ici. Commençons d'abord par la partie HTML :
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Tutoriaux</a></li>
<li><a href="#">Articles</a></li>
</ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Tutoriaux</a></li>
<li><a href="#">Articles</a></li>
</ul>
Ensuite, nous allons définir l'élément sélectionné par défaut en appliquant la classe «selected» à l'élément de notre choix.
<ul>
<li><a href="#" class="selected">Accueil</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Tutoriaux</a></li>
<li><a href="#">Articles</a></li>
</ul>
<li><a href="#" class="selected">Accueil</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Tutoriaux</a></li>
<li><a href="#">Articles</a></li>
</ul>
Passons maintenant à la partie JavaScript
Si on écrivait ce qui va s'exécuter en texte nous dirions : lorsqu'un internaute clique sur un lien du menu, nous allons supprimer la classe «selected» à tous les autres éléments et nous allons l'assigner à celui qui a été cliqué.
<ul>
<li><a onclick="AjoutSelectionA(this);return false;" href="#" class="selected">Accueil</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Astuces</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Tutoriaux</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Articles</a></li>
</ul>
<li><a onclick="AjoutSelectionA(this);return false;" href="#" class="selected">Accueil</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Astuces</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Tutoriaux</a></li>
<li><a onclick="AjoutSelectionA(this);return false;" href="#">Articles</a></li>
</ul>
Le mot clé «this» réfère au lien <a> qui a été cliqué qui celui-ci est passé en paramètre à notre fonction «AjoutSelectionA» qui est déclenché lors du clique sur un lien du menu. Voyons maintenant comment ajouter la classe «selected» au lien passé en paramètre à cette fonction :
<script type="text/javascript">
function AjoutSelectionA(link) {
link.className = "selected";
}
</script>
function AjoutSelectionA(link) {
link.className = "selected";
}
</script>
Maintenant, notre fonction ajoute la classe «selected» à l'élément cliqué, mais le travail ne se termine pas ici. Il faut encore supprimer la classe «selected» des autres éléments.
<script type="text/javascript">
function AjoutSelectionA(link) {
var ul = document.getElementsByTagName("ul")[0];
var allLinks = ul.getElementsByTagName("a");
for (var i=0; i < allLinks.length; i++) {
allLinks[i].className = "";
}
link.className = "selected";
}
</script>
function AjoutSelectionA(link) {
var ul = document.getElementsByTagName("ul")[0];
var allLinks = ul.getElementsByTagName("a");
for (var i=0; i < allLinks.length; i++) {
allLinks[i].className = "";
}
link.className = "selected";
}
</script>
Voilà le tour est joué! J'espère que vous aurez compris le fonctionnement!
Ajouter cette page à votre Digg-Like préféré
Commentaires (1)
Ecrivez un commentaire
.selected {....}
ou
autre ?