Menu à onglet avec javascript et css

La fonction multiClass()

Je vous propose un exemple utilisant un petit script astucieux développé à trois mains (les deux de Benoît et ma main gauche ;) qui permet de permuter deux classes en même temps sur un événement onclick par exemple, en passant en paramètre l'id du lien sur lequel on clique.

			function multiClass(eltId) {
				arrLinkId = new Array('_0','_1','_2','_3');
				intNbLinkElt = new Number(arrLinkId.length);
				arrClassLink = new Array('current','ghost');
				strContent = new String()
				for (i=0; i<intNbLinkElt; i++) {
					strContent = "menu"+arrLinkId[i];
					if ( arrLinkId[i] == eltId ) {
						document.getElementById(arrLinkId[i]).className = arrClassLink[0];
						document.getElementById(strContent).className = 'on content';
					} else {
						document.getElementById(arrLinkId[i]).className = arrClassLink[1];
						document.getElementById(strContent).className = 'off content';
					}
				}	
			}
		

Analyse du script

Pour commencer, nous créons le tableau arrLinkId contenant les id des liens sur lesquels doit s'effectuer le changement. Nous comptons ensuite le nombre d'éléments de cet array grâce à la méthode length. Puis nous avons un deuxième tableau qui contient les classes pour l'onglet current (celui sur lequel nous venons de cliquer) et qui mettra les autres onglets dans un état fantômatique (ghost). Nous déclarons ensuite la variable strContent qui contiendra, pour chaque itération de la boucle for, l'id du lien précédé de la chaîne "menu" pour obtenir "menu_1" que l'on retrouve comme id de la div à afficher ou masquer.

conclusion

La suite du script fait en sorte que si nous cliquons sur le lien dont l'id est "_1", la div identifiée par "menu_1" passe de la classe on à la classe off, tandis que le lien passe de la classe ghost à current. Les autres div faisant le chemin inverse. Il ne vous reste plus qu'à définir les classes par défaut au chargement de la page current ou ghost et pour les div (on ou off) and the cat is in the bag!

PS : Ce script est assez souple pour avoir d'autres applications. Partagez donc le fruit de votre imagination ;)