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