Javascript : ouvrir une div, qui se ferme si autre ouverte

Discussion dans 'Administration d'un site Web' créé par Meeuuuhhh, 13 Mai 2007.

  1. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 518
    J'aime reçus:
    0
    Bonjour,

    Voilà, j'ai trois div. J'en ouvre une en cliquant sur un lien. Si je reclique sur le lien, elle se referme. Si je clique sur le lien d'une autre div qui s'ouvre aussi en javascript, alors la précédente doit se refermer.

    Ca fonctionne pas .:cry:

    Voilà mon chetit code :

    Balise head :
    Code:
    function switchDiv(n)
    {  
    var id; switch(n)
    { 
     case "1": id = "signature"; 
    break; 
    case "2": id = "envoiMP"; 
    break; 
    case "3": id = "voirMP"; 
    break;
     }  
    document.getElementById('signature').display = "none"; document.getElementById('envoiMP').display = "none"; document.getElementById('voirMP').display = "none";   document.getElementById(id).display = "block"; }
    
    Les liens :
    Code:
    <span class="java" onClick="switchDiv(1);"> modifier la signature</span> 
    <span class="java" onClick="switchDiv(2);"> envoyer un MP</span> 
    <span class="java" onClick="switchDiv(3);"> voir les MP</span>
    
    Les divs à ouvrir :
    Code:
    <div class="baliseDiv" style="display:none;" id="signature">texte 1 </div>
    <div class="baliseDiv" style="display:none;" id="envoiMP"> texte 2</div>
    <div class="baliseDiv" style="display:none;" id="voirMP"> texte 3 </div>
    Voyez-vous le problème, SVP :?:
     
  2. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    566
    J'aime reçus:
    0
    Avec
    document.getElementById(id).style.display = "block"
    ca fonctionnera mieux :)

    et aussi pour les "case", pas besoin de guillemets vu que c'est des valeurs numériques

    ce qui donne :

    Code:
    function switchDiv(n) { 
       var id;
       switch(n) {
          case 1 : id = "signature"; break;
          case 2 : id = "envoiMP"; break;
          case 3 : id = "voirMP"; break;
          } 
       document.getElementById('signature').style.display = "none";
       document.getElementById('envoiMP').style.display = "none";
       document.getElementById('voirMP').style.display = "none";
       document.getElementById(id).style.display = "block";
       }
    voualou :)
     
  3. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 518
    J'aime reçus:
    0
    Ca fonctionne pas.

    Par contre, ça fonctionne comme ça :

    Code:
    <head>
    <title></title>
    <style type="text/css">
    <!--
    .java{
     color: #0000FF;
     cursor: pointer;
    }
    .baliseDiv{
     border: 2px ridge #AAAAAA;
    }
    //-->
    </style>
     
    <script type="text/javascript">
    <!--
    function switchDiv(n)
    {  
    var id;
      switch(n)
      { 
        case 0:
             id = "";
             break;
        case 1:
             id = "signature";
             break;
        case 2:
             id = "envoiMP";
             break;
        case 3:
             id = "voirMP";
             break;
      }  
      document.getElementById('signature').style.display = "none"; 
      document.getElementById('envoiMP').style.display = "none";
      document.getElementById('voirMP').style.display = "none";
     
      if (id!="")
         document.getElementById(id).style.display = "block";
    }
    //-->
    </script>
     
    </head>
     
    <body>
     
    <span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
    <span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
    <span class="java" onclick="switchDiv(3)"> voir les MP</span>
     
    <br />
    Les divs :
    <div class="baliseDiv" style="display:none;" id="signature">
    signature
    <span class="java" onclick="switchDiv(0)"> Fermer</span>
    </div><!--ferme baliseDiv -->
     
    <div class="baliseDiv" style="display:none;" id="envoiMP">
    envoiMP
    <span class="java" onclick="switchDiv(0)"> Fermer</span>
    </div><!--ferme baliseDiv -->
     
    <div class="baliseDiv" style="display:none;" id="voirMP">
    voirMP
    <span class="java" onclick="switchDiv(0)"> Fermer</span>
    </div><!--ferme baliseDiv -->
     
     
    </body>
     
    </html>
    Mais je n'arrive pas à faire en sorte que la div ouverte se referme aussi quand on clique sur le lien qui l'a ouvert.
     
  4. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 257
    J'aime reçus:
    1
    dans ton premier exemple, je vois :
    document.getElementById('signature').display = "none";
    tu n'a pas mis le "stye.display", juste "display"
     
  5. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 518
    J'aime reçus:
    0
    Euh oui, mais c'est corrigé maintenant, ça fonctionne :wink:

    C'est pour refermer la div en cliquant sur le lien qui l'a ouverte, que j'ai un problème, là.
     
  6. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 257
    J'aime reçus:
    1
    c'est à dire ? tu veux tout le temps n'avoir qu'un div maximum d ouvert, ou pouvoir ouvrir et fermer independement chaque div ?
     
  7. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 518
    J'aime reçus:
    0
    En fait :

    - Je clique sur le lien -> la div correspondante s'ouvre : ça fonctionne.

    - Je clique sur le lien "fermer" dans la div qui s'est ouverte -> la div correspondante se ferme : ça fonctionne.

    - Une div est déjà ouverte, je clique sur un autre lien pour ouvrir une autre div -> la div déjà ouverte se referme et la nouvelle s'ouvre : ça fonctionne.

    - Je clique sur un lien pour ouvrir la div et je reclique sur le même lien pour la refermer : ça, ça ne fonctionne pas.
     
  8. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    566
    J'aime reçus:
    0
    Euh mon script marche je l'ai essayé avant de le poster :)

    et en le modifiant j'ai obtenu ce que tu voulais :

    Code:
    <script type="text/javascript">
    function switchDiv(n) {
       var id;
       var hide = 0;
       switch(n) {
          case 1 : id = "signature"; break;
          case 2 : id = "envoiMP"; break;
          case 3 : id = "voirMP"; break;
          }
       if ( document.getElementById(id).style.display == "block" ) hide = 1;
       document.getElementById('signature').style.display = "none";
       document.getElementById('envoiMP').style.display = "none";
       document.getElementById('voirMP').style.display = "none";
       if ( hide != 1 ) document.getElementById(id).style.display = "block";
       }
    </script>
    et le html

    Code:
    <span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
    <span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
    <span class="java" onclick="switchDiv(3)"> voir les MP</span>
     
    <div class="baliseDiv" style="display:none;" id="signature">
    signature
    <span class="java" onclick="switchDiv(1)"> Fermer</span>
    </div>
     
    <div class="baliseDiv" style="display:none;" id="envoiMP">
    envoiMP
    <span class="java" onclick="switchDiv(2)"> Fermer</span>
    </div>
     
    <div class="baliseDiv" style="display:none;" id="voirMP">
    voirMP
    <span class="java" onclick="switchDiv(3)"> Fermer</span>
    </div>
     
  9. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 518
    J'aime reçus:
    0
    Ca a l'air de fonctionner merci :) (avec trois plombes de retards, mais j'étais passé à autre chose) !

    Ca fonctionne sur IE 6 et compagnie ? (j'ai testé que sur firefox et IE7).
     
  10. tompintures
    tompintures Nouveau WRInaute
    Inscrit:
    7 Juin 2007
    Messages:
    1
    J'aime reçus:
    0
    MERCI !

    merci bcp grace à ce p'tit bout eud'code j'ai solutionné un gros problème que j'avais ! :D :D :D :D :D :D :D
     
  11. klochett
    klochett Nouveau WRInaute
    Inscrit:
    30 Janvier 2007
    Messages:
    1
    J'aime reçus:
    0
    Salut,

    Un grand merci !!! Je n'y connais absolument rien en js, je bidouille juste un peu avec dreamweaver qui se charge de générer le codage de la page.
    Donc, après moult galères, j'ai reussi grace à ton exemple à ouvrir successivement des div via des liens situés dans un autre div. En fait j'ai un div principal divisé en 2 "div" l'un à coté de l'autre et je voulais des liens texte dans le 1er div enfant pour faire apparaitre le contenu lié dans le second div enfant pour le faire fonctionner comme une frame.

    J'ai trafficoté ton code à mes besoins et ça marche (du moins sous IE7, je n'ai pas d'autres navigateurs).

    Encore merci, ci dessous ma "soupe" (version simplifiée avec des fonds couleurs)
    Ceci-dit, peut etre y aurait il eu plus simple pour mettre en place le rendu final ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
    <!--
    function switchDiv(n)
    {  
    var id;
      switch(n)
      { 
        case 0:
             id = "";
             break;
        case 1:
             id = "gris";
             break;
        case 2:
             id = "vert";
             break;
        case 3:
             id = "rose";
             break;
    	case 4:
             id = "marron";
             break;
        case 5:
             id = "jaune";
             break;	
       case 6:
             id = "violet";
             break;
      }  
      document.getElementById('gris').style.display = "none"; 
      document.getElementById('vert').style.display = "none";
      document.getElementById('rose').style.display = "none";
      document.getElementById('marron').style.display = "none"; 
      document.getElementById('jaune').style.display = "none";
      document.getElementById('violet').style.display = "none";
    
      if (id!="")
         document.getElementById(id).style.display = "block";
    }
    //-->
    </script>
    
    
    
    </head>
    <style type="text/css">
    <!--
    .java{color: #0000FF; cursor: pointer;}
    #contenuBg {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0px; height:262px; width: 705px; padding: 0px 0px 0px 0px;}
    
    #boiteMenuG{float: left; width: 119px; height: 262px; margin-left: auto; margin-right: 0px}
    
    
    #boiteLic{float: left; width: 263px; height: 262px}
    
    .boite1{ position:fixed; background-color:#CCCCCC; width: 263px; height: 262px; z-index: 1;}
    .boite2{ position:fixed; background-color:#99CC66; width: 263px; height: 262px; z-index: 2;}
    .boite3{ position:fixed; background-color:#FFCCFF; width: 263px; height: 262px; z-index: 3;}
    .boite4{ position:fixed; background-color:#CC9900; width: 263px; height: 262px; z-index: 4;}
    .boite5{ position:fixed; background-color:#FFFF33; width: 263px; height: 262px; z-index: 5;}
    .boite6{ position:fixed; background-color:#CC99FF; width: 263px; height: 262px; z-index: 6;}
    
    #boiteTexte{float: left; width: 268px; height: 262px}
    
    #boiteMenuD{float: left; width: 55px; height: 262px; margin-right: auto}
    -->
    </style>
    
    
    <body>
    
    <div id="contenuBg">
     <div id="boiteMenuG">
       <p><span class="java" onclick="switchDiv(1)"> gris </span></p>
       <p><span class="java" onclick="switchDiv(2)"> vert </span></p>
       <p><span class="java" onclick="switchDiv(3)"> rose </span></p>
       <p><span class="java" onclick="switchDiv(4)"> marron</span></p>
       <p><span class="java" onclick="switchDiv(5)"> jaune</span></p>
       <p><span class="java" onclick="switchDiv(6)"> violet</span></p>
     </div>
      <div id="boiteLic"></div>
        <div id="boiteTexte">
    	  <div class="boite1" style="display:block;" id="gris"></div>
    	  <div class="boite2" style="display:none;" id="vert"></div>
    	  <div class="boite3" style="display:none;" id="rose"></div>
    	  <div class="boite4" style="display:none;" id="marron"></div>
    	  <div class="boite5" style="display:none;" id="jaune"></div>
    	  <div class="boite6" style="display:none;" id="violet"></div>
    	</div>
     <div id="boiteMenuD"></div>
    </div>
    
    </body>
    </html>
    
     
  12. webdevelop
    webdevelop Nouveau WRInaute
    Inscrit:
    2 Juin 2016
    Messages:
    1
    J'aime reçus:
    0
    Après avoir rechercher sur le net, j'ai essayé ce tuto et ça marche parfaitement bien mais je me demande comment je dois animé l'ouverture de DIV? car il s'ouvre brusquement sans animation ou transition.
    Merci bien de votre réponse.
     
  13. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 885
    J'aime reçus:
    73
    Il y a désormais bien plus simple en passant par des framework comme jQUery, et des fonctions de type toggle() (qui gèrent les effets).
     
  14. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 022
    J'aime reçus:
    291
    Ou avec les transitions CSS3
     
Chargement...
Similar Threads - Javascript ouvrir div Forum Date
Quels Outils Javascript pour générer des documents Demandes d'avis et de conseils sur vos sites 21 Juillet 2020
HTML fait par Javascript <=>gérer les Events ? Développement d'un site Web ou d'une appli mobile 5 Juillet 2020
Compresseur Javascript récent? Développement d'un site Web ou d'une appli mobile 7 Juin 2020
Debugger Javascript sous IOS (avec émulateur) Développement d'un site Web ou d'une appli mobile 27 Mai 2020
Styliser popup alert javascript Développement d'un site Web ou d'une appli mobile 16 Mars 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Format milliers nombre en javascript Développement d'un site Web ou d'une appli mobile 5 Décembre 2019
Référencement d'un site full javascript (angular js) Référencement Google 10 Septembre 2019
Compatibilité Javascript pour IE. Demandes d'avis et de conseils sur vos sites 21 Avril 2019
Librairie javascript PerformanceNavigationTiming Développement d'un site Web ou d'une appli mobile 7 Avril 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice