Changer la classe css d'un élément avec javascript

Commenter

Contenu du snippet

Changer une classe de feuille de style avec Javascript est en fait simple. Ici, l'exemple reprend un système d'onglets utilisés normallement avec ajax...

Source / Exemple : 


<html>
<head>
<script>
v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)

	//Appel de la page...	
        //file ne sert ici à rien
        //menuclick est l'id de l'objet sur lequel on clique
	function LoadPage(file, menuclick){
		//...	

		//on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
		if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className  = "menuitem"; 
		//Mise à jour de l'onglet actuel
                v_menuitemactu = menuclick;
                //On change le style de l'onglet qui vient d'être sélectionné
		document.getElementById(v_menuitemactu).className  = "menuitemactu";
	}
</script>

<style type="text/css">
/* !! Attention, ici, seules les images changent !! */
/*Onglet non sélectionné...*/
td.menuitem{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_noselect.png");
	text-align: left;
	padding-left: 12px;
}
/* Onglet non-sélectionné survolé */
td.menuitem:hover{
	background-image: url("../images/menubutton_mouseon.png");
}
/* Onglet sélectionné */
td.menuitemactu{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_select.png");
	text-align: left;
	padding-left: 12px;
}
</style>
</head>
<body>
	<table width=200 cellpadding=0 cellspacing=0 border=0>
		<tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
		<tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
		<tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
		<tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>		
	</table>
</body>

Conclusion :


Ayant une longue recherche sur Exalead, je n'ai pas trouvé de source faisant ce que fait celle-ci... Donc, voilà! Je pense que cela servira à beaucoup.

Je l'ai testé sous Firefox et cela marche parfaitement. À vous d'adapter selon vos besoins.
Je l'ai mis dans cette cathégorie, car elle est applicable à bien plus qu'un simple système d'onglet.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.