Astuces
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="#">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.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.className = "";
}
link.className = "selected";
}
</script>
Voilà le tour est joué! J'espère que vous aurez compris le fonctionnement!
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (3)
Flux RSS pour les commentaires
Ecrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...