Comment gérer l'élément actif d'un menu avec JavaScript et DOM

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="http://www.pckult.net/#">Accueil</a></li>
   <li><a href="http://www.pckult.net/#">Astuces</a></li>
   <li><a href="http://www.pckult.net/#">Tutoriaux</a></li>
   <li><a href="http://www.pckult.net/#">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="http://www.pckult.net/#" class="selected">Accueil</a></li>
   <li><a href="http://www.pckult.net/#">Astuces</a></li>
   <li><a href="http://www.pckult.net/#">Tutoriaux</a></li>
   <li><a href="http://www.pckult.net/#">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="http://www.pckult.net/#" class="selected">Accueil</a></li>
   <li><a onclick="AjoutSelectionA(this);return false;" href="http://www.pckult.net/#">Astuces</a></li>
   <li><a onclick="AjoutSelectionA(this);return false;" href="http://www.pckult.net/#">Tutoriaux</a></li>
   <li><a onclick="AjoutSelectionA(this);return false;" href="http://www.pckult.net/#">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>
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>
Voilà le tour est joué! J'espère que vous aurez compris le fonctionnement!