Afficher/masquer plusieurs div à un seul endroit

Signaler
Messages postés
16
Date d'inscription
jeudi 29 septembre 2005
Statut
Membre
Dernière intervention
4 juin 2014
-
Messages postés
316
Date d'inscription
jeudi 9 janvier 2003
Statut
Membre
Dernière intervention
1 février 2010
-
 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". 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.  
Je remercie d'avance tout celle et ceux qui prendront le temps de lire mon message.   

4 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
bonjour,
    getElementById ce n'est jamais qu'une manière d'adresser un élément, rien de plus.
    soit tu n'utilises qu'un div, dans lequel tu met le descripif du mois voulu.
    soit tu utilises 12 div, et quand tu en affiches un, tu caches le précédent.
<hr />



Cordialement                Bul         [mon Site]     [M'écrire]
<hr />


En général, c'est absurde de généraliser.
Messages postés
16
Date d'inscription
jeudi 29 septembre 2005
Statut
Membre
Dernière intervention
4 juin 2014

Bonjour

Merci pour ta réponse, néanmoins je souhaiterai pouvoir cliquer sur n'importe quel mois de l'année et que dans un div soit affiché la description du mois, ensuite je voudrais pouvoir cliquer sur un autre mois et voir apparaitre un autre div à la place du précédent et enfin je voudrais pouvoir cliquer sur le mois de juin après le mois de janvier ou sur le mois de décembre après le mois d'octobre en fait je n'ai pas d'ordre.

Merci d'avance
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>néanmoins je souhaiterai pouvoir cliquer sur n'importe quel mois de
l'année
>>et que dans un div soit affiché la description du mois, ensuite
je voudrais
>>pouvoir cliquer sur un autre mois et voir apparaitre un
autre div à la place
>>du précédent et enfin je voudrais pouvoir cliquer
sur le mois de juin après
>>le mois de janvier ou sur le mois de décembre
après le mois d'octobre
>>en fait je n'ai pas d'ordre.

donc :

    _ soit tu n'utilises qu'un div, dans lequel tu y met ce que tu veux
            en fonction du mois chosi.
    _ soit tu utilises 12 div, 1 pour chaque mois,
            quand tu en affiches un, tu caches le précédent affiché
                   (     pas le mois précédent ! le précédent afffiché )
           ou alors, tu affiches tous les div au même endroit.



<hr />




Cordialement            Bul         [mon Site]     [M'écrire]
<hr />


En général, c'est absurde de généraliser.
Messages postés
316
Date d'inscription
jeudi 9 janvier 2003
Statut
Membre
Dernière intervention
1 février 2010
1
Je ne suis pas tout à fait d'accord avec les 12 Div à créer ... parce que à chaque click vous allez parcours les 12 élèments soit 12 itérations + 12 test et/ou affectation de visibilité ... donc niveau perf je ferai ca :

- définition d'un "hashmap" en constante ... chercher la syntaxe javascript ...
  [{'janvier','le mois ou tu peux frimer'},{'février','reste au chaud dans tes souliers'},{'mars','et ca reppart'},{'avril','ne te découvre pas d'un fil'},...]

- ajout d'un listener ou d'un onclick sur la liste déroulante appelant une fonction du type
   onclick="afficherDetail (this, 'monDivDeDestination')"

- on met à jour le div
   function afficherDetail (combo, destination) {
     document.getElementById(destination).innerHtml = monHashTable[combo.selectedValue]
   }

voila, bon, y'a surement des propriétés qui existent pas parceque j'ai pas le temps d'aller chercher et de tester mais dans l'idée c'est ca :o)

d'autre part, on peut créer le div de destination en DOM s'il n'existe pas et ré-utiliser ce dernier ... en gros ca donne ca :
  var domDiv = document.getElementById ('monDivDeDestination');
  if (undefined = domDiv)
 {
    domDiv = document.createElement("DIV");
    domDiv.id = 'monDivDeDestination';
    combo.parentNode.appendChild(domDiv) // à toi de voir ou tu veux le mettre ... :o)
  }
  domDiv.innerHtml ...

Bon courage :)

--=Capoueidiablo=--