Afficher/masquer plusieurs div à un seul endroit

Afficher/masquer plusieurs div à un seul endroit - HTML/CSS - Programmation

Marsh Posté le 17-09-2007 à 10:30:43    

:hello:  Bonjour à tous et bon début de semaine.
 
Je ne n'arrive pas à réaliser un affichage de div géré par le clic de la souris malgrès les tutoriaux de goolgle " Afficher/masquer un div". :sweat: car ces derniers ne répondent pas à ma question.
 
En fait j'aurais voulu réaliser une page de la facon suivante:
Pour faire simple, j'ai une liste de mots ( les mois de l'année) et je voudrais que en cliquant sur janvier il apparaisse en dessous dans un div un texte descriptif sur le mois de janvier et lorsque je clique sur février il y ai un texte descriptif du mois de février à la place de celui de janvier.
 
J'ai essayé plusieurs méthode en passant par le javascript et getElementById mais sur tous les sites où je suis allé getElementById est utilisé pour afficher /masquer un div or je ne veux pas que l'utilisateur ai à fermer la description de janvier pour lire celle de février mais juste à cliquer sur février.
 
En espérant avoir été clair. :whistle:  
Je remercie d'avance tout celle et ceux qui prendront le temps de lire mon message.  :sol:  
 

Reply

Marsh Posté le 17-09-2007 à 10:30:43   

Reply

Marsh Posté le 17-09-2007 à 11:36:30    

approche 1 : avec le afficher/masquer

 
Code :
  1. var t_idDesDivMois = new Array("divJanvier","divFev".....);
  2. function kvf300(idDivMoisCourant)
  3. {
  4.         for (var mois in t_idDesDivMois)
  5.              document.getElementById(mois ).style.display='none';
  6.         document.getElementById(idDivMoisCourant).style.display='block';
  7. }
 

approche 2 , avec des contenus

 
Code :
  1. var t_contenuMois = new Array("en janvier il fait froid, mais on mange des crèpes","février n'a que 28 jours , ou 29 ", ........);
  2. function kvf300( idMois)
  3. {
  4.      
  5.         document.getElementById('idduDivContenatLeDescriptif').innerHTML =  t_contenuMois [idMois]
  6. }


Message édité par flo850 le 17-09-2007 à 11:36:42
Reply

Marsh Posté le 17-09-2007 à 19:14:15    

Bonjour et merci pour ta réponse  :wahoo:  
 
Néanmoins, étant novice en javascript je crois avoir déjà vu la fonction "innerHTML" qui permet d'afficher un div au passage de la souris alors que je voudrais en fait cliquer sur les mois de l'année pour voir apparaitre un div différent à chaque fois.
 
Par ailleur, est il possible à la place de "en janvier il fait froid, mais on mange des crèpes" de mettre du code PHP et ou HTML ? :sweat:  
 
Enfin une dernière question, lorsque tu parles d'id, comment faire pour qu'il s'agisse d'un id de reconnaissance comme id="janvier" id="février" et non qu'il s'agisse de l'id utilisé en CSS... car comme les div que je veux afficher on déjà une class je voudrais savoir si cela n'allait pas interférer avec l'id  :pt1cable:  
 
 
Merci d'avance

Reply

Marsh Posté le 18-09-2007 à 08:35:04    

innerHTML permet de modifier le contenu d'un div , mais aussi de pas mal d'autres elements . Ca n'a rien a voir avec la manière d'appeler la fonction ( onclick  , onmouseover, .... )
 
tu peux remplacer " en janvier il fait froid" par du html , mais pour mettre du code php a la place , ca va etre plus compliqué . N'oublie pas que tu l'appelle en javascript ,donc cote client  
 
tu peux avoir des class sur un objet et un id, c'est valide et conseillé
<div class="mois truc bidule" id="janvier"> </div> ==> div ayant 3 classes ( mois, truc et bidule ) et un id
il y a , au plus , 1 id  par objet , et chaque id doit etre unique dans la page

Reply

Sujets relatifs:

Leave a Replay

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