Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2972 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU]Modifier la mise en forme selon onClick

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU]Modifier la mise en forme selon onClick

n°1934934
FalleN-
Posté le 23-10-2009 à 16:49:43  profilanswer
 

Bonjour à tous,
 
(D'abord, veuillez m'excuser pour le titre peu explicite du topic mais j'ai vraiment eu du mal à en trouver un qui pouvait décrire correctement mon problème.)
 
J'ai un code javascript qui permet aux visiteurs d'afficher ou de cacher le contenu d'une div.
J'ai donc 3 liens qui se présente comme ceci
 
Afficher div 1 - Afficher div 2 - Afficher div 3
 
Lorsque je clique sur "Afficher div1", j'ai le contenu de cette div qui s'affiche,et si je clique juste apres sur  "Afficher div 2", j'ai la div 1 qui se cache et la div 2 qui s'affiche , et ainsi de suite.
 
Cependant, j'aimerais faire en sorte que lorsque l'on clique sur  "Afficher div 1", cette phrase se mette en gras pour signaler au visiteur quel div il est en train de visionner et si on clique juste après sur "Afficher div 2", le "Afficher div1" redeviendra en écriture normal et c'est le "Afficher div2" qui se mettra en gras.
 
Je ne sais pas si j'ai été bien compris, je vous donne la syntaxe de mon code pour que vous puissiez m'aider:
 
Mon code javascript dans le HEAD :
 

Code :
  1. <script type="text/javascript">
  2. function switchDiv(n) {
  3.    var id;
  4.    var hide = 0;
  5.    switch(n) {
  6.       case 1 : id = "site"; break;
  7.       case 2 : id = "logo"; break;
  8.       case 3 : id = "design"; break;
  9.       }
  10.    if ( document.getElementById(id).style.display == "block" ) hide = 1;
  11.    document.getElementById('site').style.display = "none";
  12.    document.getElementById('logo').style.display = "none";
  13.    document.getElementById('design').style.display = "none";
  14.    if ( hide != 1 ) document.getElementById(id).style.display = "block";
  15.    }
  16. </script>


 
 
Mon code dans le <body> permettant d'afficher les divs:
 
 

Code :
  1. <span onClick ="switchDiv(1);">SITES</span>
  2.     <div style="display:none;" id="site">
  3.          Contenu de ma div site....
  4.     </div>
  5. <span onClick ="switchDiv(2); "> LOGOS </span>
  6.     <div style="display:none;" id="logo">
  7.          Contenu de ma div logo....
  8.     </div>
  9. <span onClick ="switchDiv(3);"> DESIGNS </span>
  10.     <div style="display:none;" id="design">
  11.          Contenu de ma div design....
  12.     </div>


 
 
 
Je vous remercie par avance de l'aide que vous pourrez m'apporter  :)  
 
Bonne journée !


Message édité par FalleN- le 23-10-2009 à 17:08:12
mood
Publicité
Posté le 23-10-2009 à 16:49:43  profilanswer
 

n°1934943
FalleN-
Posté le 23-10-2009 à 17:01:58  profilanswer
 

Ayant posté sur un autre forum, un internaute m'a déjà répondu et j'ai donc trouvé la solution à mon problème :), je vous la donne ici :

 

"Dans tes onclick tu mets :

 

switchDiv(x, this);

 

Et coté Javascript :

Code :
  1. var lastOpen = false;
  2. function switchDiv(n, tx) {
  3.    var swit = {
  4. 1: 'site',
  5. 2: 'logo',
  6. 3: 'design'
  7.    }, id = swit[n], ob = document.getElementById(id);
  8.  
  9.    ob.style.display = ob.style.display == 'block' ? 'none' : 'block';
  10.  
  11.    for (var i in swit) {
  12. if (i != n) {
  13.  document.getElementById(swit[i]).style.display = 'none';
  14. }
  15.    }
  16.  
  17.    if (lastOpen) {
  18.       lastOpen.style.fontWeight = 'normal';
  19.    }
  20.    tx.style.fontWeight = 'bold';
  21.    lastOpen = tx;
  22. }


"


Message édité par FalleN- le 23-10-2009 à 17:24:01
n°1934946
pataluc
Posté le 23-10-2009 à 17:09:00  profilanswer
 

perso je partirai sur qqchose du genre:

Code :
  1. cript type="text/javascript">
  2. function switchDiv(s, n) {
  3.   s.style.fontWeight='bold';
  4.  
  5.    var id;
  6.    var hide = 0;
  7.    switch(n) {
  8.       case 1 : id = "site"; break;
  9.       case 2 : id = "logo"; break;
  10.       case 3 : id = "design"; break;
  11.       }
  12.    if ( document.getElementById(id).style.display == "block" ) hide = 1;
  13.    document.getElementById('site').style.display = "none";
  14.    document.getElementById('logo').style.display = "none";
  15.    document.getElementById('design').style.display = "none";
  16.    if ( hide != 1 ) document.getElementById(id).style.display = "block";
  17.    }
  18. </script>

et

Code :
  1. <span onClick ="switchDiv(this, 1);">SITES</span>
  2.     <div style="display:none;" id="site">
  3.          Contenu de ma div site....
  4.     </div>
  5. <span onClick ="switchDiv(this, 2); "> LOGOS </span>
  6.     <div style="display:none;" id="logo">
  7.          Contenu de ma div logo....
  8.     </div>
  9. <span onClick ="switchDiv(this, 3);"> DESIGNS </span>
  10.     <div style="display:none;" id="design">
  11.          Contenu de ma div design....
  12.     </div>

bon après il faut remettre les autres à normal...
 
 
par contre perso je te conseille un framework comme jquery qui peut bien te faciliter la tache pour ce genre de manip'.
 
et accessoirement, une question: pourquoi fait tu un case sur ton paramètre 1, 2 ou 3 au lieu de passer directemetn "sites", "logos" ou "designs" ??
 
 
 
EDIT: Grillaid  [:benou_grilled]  mais au moins on est d'accord.  :D


Message édité par pataluc le 23-10-2009 à 17:10:08
n°1934949
FalleN-
Posté le 23-10-2009 à 17:17:59  profilanswer
 

Merci tout de même de ta réponse Pataluc.
 
Concernant le framework jquery, il est évident que j'aurais préféré utiliser ce genre de méthode car elle est bien plus ergonomique et bien plus pratique que les veilles div css..  
 
Le problème est que j'ai déjà voulu me plancher dessus et je n'y arrive vraiment pas à l'appliquer sur mes codes. A chaque fois sa plante , a chaque fois il y a des bugs.. C'est dommage que je n'arrive pas à l'utiliser en tout cas :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU]Modifier la mise en forme selon onClick

 

Sujets relatifs
html / javascript / onclick[Résolu] JBoss et Virtual Host
Problème:boite de dialogue alert() avec chrome+safari - [Résolu][php/mysql] lancer un programme php en cas d'updates de MySql [resolu]
Variables d'environnement en batchModifier le texte d'une msgbox
[resolu] Formulaire avec upload qui renomme mon fichier[Résolu] Fermeture inopiné application Delphi
[Résolu] Problème background[résolu] Outils de reformatage de code
Plus de sujets relatifs à : [RESOLU]Modifier la mise en forme selon onClick


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR