|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 CHANGER LA CLASSE CSS D'UN ÉLÉMENT AVEC JAVASCRIPT
 Information sur la source
 Description
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
- <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>
<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.
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
changer source iframe avec js sous differents browsers [ par martiall ]
Salut à toutes et tous,en essayant de faire simple....Sur ma page, j'ai une iframe du style :<IFRAME id="toto" name="toto" src="page1.php" hei
Changer le Background image via onmouseover [ par dorian53 ]
Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur
changer de place à une <div> [ par mickael56100 ]
Bonjour tout le monde je laisse un message sur ce forum car jai un petit probleme. En fait je m'y connais pas trop en javascript et j'aurais besoin de
javascript [ par belkhayaty ]
salut,dans quelques pages de codes-sources.com, il y a es zip à télécharger où il y a un fichier .swf et autre .fla moi je voulais un menu dynamique s
Script javascript... [ par mydoom54 ]
Bonjour, je voudrais avoir un code comme sa : PS: j'ai chercher partout j'ai pas trouverA B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Traitement d'image et javascript [ par dd58007 ]
Bonjour, Est-il possible de lire les pixels d'une image sur internet avec javascript, activeX....?Merci
Formulaire Changer de focus avec la touche point [ par nzangel ]
Bonjour,J'ai un formulaire qui demande une adresse IP, ce formulaire demande 4 champs et je voudrais savoir si il est possible de remplacer la touche
passer une variable php dans du javascript [ par ciju ]
Bonjour,J'ai un soucis d'exactitude dans la definition de mon code, est ce quelqu'un pourrait me donner la solution, etant definitevement nul !
calendar javascripte [ par arouwa ]
Bonjour,je veux verifier si la date a été sélectionnée dans ma page, alors je vbeux le faire avec du javascripte alors je passe mon objet calendar dan
Javascript unobtrusive [ par duterte ]
Bonjour, Débutant en javascript, j'ai créé un script très utile pour afficher du contenu dynamique dans plusieurs div à la demande. Je souhaiterais re
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|