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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 22 601 fois - Téléchargée 19 fois

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

Ajouter un commentaire

Commentaires

Messages postés
34
Date d'inscription
samedi 26 mars 2005
Statut
Membre
Dernière intervention
8 avril 2011

il faut arreter d'etre negatifs, cette source est utile, il faut pas attendre qu'on vous dit tout, c'est pas un service livre paye, il faut l'adapter a des travaux personnels, il y a des pistes de developement interesantes avec cette source.
merci a l'auteur
Messages postés
29
Date d'inscription
lundi 10 décembre 2007
Statut
Membre
Dernière intervention
13 octobre 2008

Thanks
Messages postés
95
Date d'inscription
mercredi 6 juillet 2005
Statut
Membre
Dernière intervention
23 août 2010

Merci pour la source, moi sa ma appris un truc :p

++
Messages postés
5
Date d'inscription
lundi 16 août 2004
Statut
Membre
Dernière intervention
18 mars 2008

Ben tant pis alors, je pensais que ce serait utile...
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Même remarque que Arto_8000.

Tu aurais pu, par exemple, montrer comment implémenter plusieurs classes, en ajouter une, en supprimer une, vérifier l'existence d'une classe, etc...
Afficher les 7 commentaires

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.