[RESOLU]Modifier la mise en forme selon onClick

Modifier la mise en forme selon onClick [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 23-10-2009 à 16:49:43    

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>
  3.     <div style="display:none;" id="site">
  4.          Contenu de ma div site....
  5.     </div>
  7. <span onClick ="switchDiv(2); "> LOGOS </span>
  9.     <div style="display:none;" id="logo">
  10.          Contenu de ma div logo....
  11.     </div>
  13. <span onClick ="switchDiv(3);"> DESIGNS </span>
  15.     <div style="display:none;" id="design">
  16.          Contenu de ma div design....
  17.     </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
Reply

Marsh Posté le 23-10-2009 à 16:49:43   

Reply

Marsh Posté le 23-10-2009 à 17:01:58    

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


"


Message édité par FalleN- le 23-10-2009 à 17:24:01
Reply

Marsh Posté le 23-10-2009 à 17:09:00    

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
Reply

Marsh Posté le 23-10-2009 à 17:17:59    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed