Html changement de div

[Résolu/Fermé]
Signaler
Messages postés
937
Date d'inscription
vendredi 10 août 2007
Statut
Membre
Dernière intervention
29 avril 2021
-
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
-
Bonjour à vous,

J'ai une petite question qui va peut être paraître un peu bête.

J'ai quatre div de texte, j'aimerai qu'il y est une div qui apparaisse au centre de ma page, que les trois autres soient cachés.

J'aimerai, lorsque l'on cliquera sur un bouton, que la première div se cache et que s'affiche la seconde etc...

C'est possible en html pur ou il faut du Javascript ?

Vous pouvez m'aider à faire cela ?

Merci à vous

6 réponses

Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
Bonjour,

Il faudra un tout petit peu de javascript. Personnellement, j'utilise ça:
<a onClick="javascript: document.getElementById('div01').style.display='block';
	document.getElementById('div02').style.display='none';
	document.getElementById('div03').style.display='none';
	document.getElementById('div04').style.display='none';
	document.getElementById('div05').style.display='none';
	document.getElementById('div06').style.display='none';
	document.getElementById('div07').style.display='none';">LIEN DIV 01</a>

<a onClick="javascript: document.getElementById('div01').style.display='none';
	document.getElementById('div02').style.display='block';
	document.getElementById('div03').style.display='none';
	document.getElementById('div04').style.display='none';
	document.getElementById('div05').style.display='none';
	document.getElementById('div06').style.display='none';
	document.getElementById('div07').style.display='none';">LIEN DIV 02</a>


Et répéter ainsi pour toutes les div (là y'en a 7, mais vous en mettez autant que vous voulez).

En gros, ce code va rendre visible la div souhaitée, et du coup rendre invisible les autres. Car sinon elles apparaîtront toutes sans disparaître et ce ne sera pas bien beau..

Il faut donc à chaque ligne mettre "block" pour que la div soit visible ou "none" pour qu'elle ne le soit pas.

Cordialement,
Olivier
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
937
Date d'inscription
vendredi 10 août 2007
Statut
Membre
Dernière intervention
29 avril 2021
7
C'est parfait, merci beaucoup pour cette réponse.

Je me permet une autre question, je ne suis pas très calé avec le Javascript, a quel moment se fait le clic sur le bouton et du coup le changement de div ?

Je n'arrive pas à le situer :(

Désolé pour cette question.
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
onClick="javascript:
ça c'est le code qui lui dit de faire une action lors du clic.
document.getElementById

et ça c'est le code pour aller chercher un élément identifié par id et lui appliquer l'effet voulu.

Le texte LIEN DIV 01 et les autres sont les actuels liens qui seront cliqués.
Messages postés
937
Date d'inscription
vendredi 10 août 2007
Statut
Membre
Dernière intervention
29 avril 2021
7
Super, je vais essayer cela, merci encore :)
Messages postés
407
Date d'inscription
lundi 20 octobre 2008
Statut
Membre
Dernière intervention
29 août 2018
78
cela va m'être utile aussi, Merci
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
je vous en prie :)