Afficher/masquer une div

Signaler
Messages postés
3
Date d'inscription
mercredi 14 décembre 2011
Statut
Membre
Dernière intervention
2 mars 2012
-
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
-
Bonjour/bonsoir

Comme le titre ne l'explique 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 Javascript :
<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 :







bla bla bla



patati patata


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

3 réponses

Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Ce serait beaucoup plus simple avec un seul bouton qui change de valeur et de couleur un clic sur deux. Comme ceci :
<html>
<head>
<style type="text/css">
.gauche {padding:4px;background-color:red; border:0px; color:white;}
.droite {paddin:4px;background-color:blue; border:0px; color:white;}
#div1,#div2
{
position:absolute;
top:60px;
background-color:white;
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
function changeDiv(valbt)
{
if (valbt=="Gauche") {
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
document.getElementById("btSeldiv").className="droite";
document.getElementById("btSeldiv").innerHTML="Droite";
}
else {
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
document.getElementById("btSeldiv").className="gauche";
document.getElementById("btSeldiv").innerHTML="Gauche";
}
}
</script>
</head>

Gauche



bla bla bla


patati patata


</html>
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Une petite erreur de frappe, ce n'est pas onclik mais onclick qu'il faut lire.
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
12
Salut,

J'ai modifié tout ça et fait fonctionné le truc avec 5 boutons (et donc 5 contenus). Je te laisse adapter à tes besoins. SI tu as des questions sur le fonctionnement, n'hésites pas à les poser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      div.custom_button
      {
      padding: 3px;
      margin: 3px;
      width: 100px;
      border: 1px solid gray;
      background-color: #F2F2F2;
      }

      div.active_button
      {
      background-color: #A9F5A9;
      }

      div.content
      {
      padding: 3px;
      margin: 3px;
      border: 1px solid red;
      }
    </style>
  </head>
  
    
button 01

    
button 02

    
button 03

    
button 04

    
button 05


    
content 1

    
content 2

    
content 3

    
content 4

    
content 5


    <script type="text/javascript">
      function ctn_switch(button, ctn)
      {
  var elem;

  var btn_lst = document.getElementsByClassName('custom_button');
  for(i 0; elem btn_lst.item(i); i++)
  {
      if (elem != button)
  elem.classList.remove('active_button');
      else
  elem.classList.add('active_button');
  }

  var ctn_lst = document.getElementsByClassName('content');
  for(i 0; elem ctn_lst.item(i); i++)
  {
      if (elem != ctn)
  elem.style.display = 'none';
      else
  elem.style.display = 'block';
  }
      }

      ctn_switch(document.getElementById('default_button'), document.getElementById('ctn1'));
    </script>
  
</html>