Sujet Précédent Sujet Suivant

Afficher/masquer une div

samirlipopette Messages postés 3 Date d'inscription mercredi 14 décembre 2011 Statut Membre Dernière intervention 2 mars 2012 - 2 mars 2012 à 00:14
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 - 2 mars 2012 à 18:33

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>

A voir également:

Afficher/masquer une div
Afficher un tableau php en html - Conseils pratiques -PHP
Sql afficher les 10 dernières lignes - Forum SQL
Afficher json html - Conseils pratiques -Javascript
Afficher les colonnes d'une table sql ✓ - Forum SQL
Afficher en arabe - Forum Delphi / Pascal

3 réponses

Réponse 1 / 3

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
2 mars 2012 à 14:34

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>

Réponse 2 / 3

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
2 mars 2012 à 14:36

Une petite erreur de frappe, ce n'est pas onclik mais onclick qu'il faut lire.

Réponse 3 / 3

TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
2 mars 2012 à 18:33

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>

Discussions similaires

Solution pour cacher un mot de passe d'accès d'une page

afficher un tableau en php

la division en java

recuperer les noms de champs d'une table

coller deux div avec du css

Votre réponse

Discussions similaires