Menu à onglet avec javascript et css

Les menus à onglets sont à la mode depuis déjà quelques temps. Et c'est temps mieux car ils sont bien pratiques. Ils permettent de résoudre un des probléme fondamentaux des interfaces utilisateur : comment présenter toujours plus d'information sur une page, tout en en facilitant l'accés. Ou tout au moins sans transformer votre site en usine é gaz dont le parfum ferait fuir vos visiteurs ;)

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 ;)

Retour vers LightPrototype