10550 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je me permets de vous contacter car j'ai une question.

J'ai 3 boutons qui permettent d'afficher 3 div différentes.

De base, les 3 div sont en "display: none".

Dans mon fichier JS, j'ai dit :

- Si je clique sur le bouton 1, la div 1 s'affiche, la 2 et la 3 ne s'affichent pas.
- Si je clique sur le bouton 2, la div 2 s'affiche, la 1 et la 3 ne s'affichent pas.
- Si je clique sur le bouton 3, la div 3 s'affiche, la 1 et la 2 ne s'affichent pas.

Code actuel (CodePen)

Si j'ai plusieurs div à gérer, cette solution est "fastidieuse".

N'existerait-il pas une autre façon d'obtenir le résultat souhaité en "automatisant" le tout ?
Peut-être en utilisant des variables ?

Merci de votre aide Smiley smile
Bah tu fais :
- Si tu appuies sur une des div : la div choisie est en display: block et les autres en none,
Pas obligé de faire du cas par cas
@aliasdmc,

La technique de :target est intéressante. Elle souffre toutefois de 2 inconvénients :
* On ne peut pas pré-activer une des <div> de couleur. Certes on peut simuler un clic sur un <a> avec Javascript
* on modifie l'URL dans la barre de navigation

La technique avec <input type="radio"> pallie à ces deux problèmes.

Merci pour la démo.
Bonjour aliasdmc,

Merci pour la solution proposée.
C'est intéressant de prendre connaissance de plusieurs méthodes.

Ce qui me gêne, c'est le fait qu'"on modifie l'URL dans la barre de navigation".

Merci encore Smiley smile