Discussion :

[itanimulli]

Bonjour/bonsoir

Comme le titre ne le dis pas vraiment j'ai un soucis avec mon code...

Je suis parvenu à faire une partie de ce que je voulais :

Afficher/Masquer une div au clic sur un bouton.

Mais seulement voilà :

Admettons que j'ai 2 boutons ('Gauche' et 'Droite').
Par défaut la div appelé 'div1' du bouton 'Gauche' est affiché par défaut. Et quand je clic sur le bouton 'droite' la div concerné ('div2' donc) s'affiche. Jusque là tout va bien.

Là ou ça coince c'est à ce niveau :

J'aimerais que lorsque je clic sur un bouton pour afficher une div celle ci ce colore admettons en vert, l'autre serait gris.

En clair le bouton changerai de couleur s'il affiche sa div ou pas. Sauf que je n'y parviens pas...

Quelqu'un peut-il m'aider ?

Merci.

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script> 
function test1() { 
document.getElementById('div2').style.display='block' 
document.getElementById('div1').style.display='none' 
} 
 
function test2() { 
document.getElementById('div1').style.display='block' 
document.getElementById('div2').style.display='none' 
} 
</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div style="position:absolute"><input type="button" class="gauche" onclick="test1()" value="Gauche"/></div>
 
<div style="position:absolute;margin-left:150px"><input type="button" class="droite" onclick="test2()" value="Droite"/></div>
 
<div id="div1" style="position:absolute;top:30px;background-color:white;width:200px;height:200px;display:block">bla bla bla</div>
 
<div id="div2" style="top:30px;display:none;background-color:white;width:200px;height:200px;display:block">patati patata</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<style>
#div2 {position:absolute;}
.gauche{background-color:red; border:0px; color:white;}
.droite{background-color:blue; border:0px; color:white;}
</style>

[andry.aime]

Bonjour et Bienvenue sur Dvp

Modifie son style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("idDuBouton").style.backgroundColor="#00FF00";

A+.

[itanimulli]

Merci Andry pour ta réponse, mais j'ai trouvé ce que je voulais, donc si ça peut aider quelqu'un je conseillerais d'aller faire un tour ici
ou de taper sur google "menu onglet javascript"

Voilà voilà