Comment basculer entre deux divs

J'essaie de basculer entre deux divs. Par exemple, onload, je veux que le contenu de gauche apparaisse et que le bon contenu reste caché. Si je clique sur le bon div, je veux que le contenu de gauche se cache et que le bon contenu apparaisse et vice versa. Je suis très nouveau pour javascript mais voici ce que j'ai. Je n'arrive pas à le faire fonctionner. S'il vous plaît aider ...Comment basculer entre deux divs

Voici mon code HTML:

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');"> 
    Right 
</div> 


<div id="left" style="display: block;"> 
    This is the content for the left side 
<div> 

<div id="right" style="display: none;"> 
    This is the content for the ride side 
</div>

Voici le Javascript J'utilise:

<script type="text/javascript"> 
    function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
     else 
     e.style.display = 'block'; 
    } 
    </script>

Source

2011-02-08 Ryan Bennett

démonstration en direct:http://jsfiddle.net/PauWy/1/

HTML:

<p id="toggle"> 
    <span> Left </span> 
    <span> Right </span> 
</p> 

<div id="left"> LEFT CONTENT </div> 
<div id="right"> RIGHT CONTENT </div>

J avascript:

$('#toggle > span').click(function() { 
    var ix = $(this).index(); 

    $('#left').toggle(ix === 0); 
    $('#right').toggle(ix === 1); 
});

CSS (pour cacher le onload droit DIV):

#right { display:none; }

Insérez le code JavaScript au bas de la page.

Remarquez comment l'élément SCRIPT est situé à l'extrémité de l'élément BODY. Notez également que le code jQuery doit se trouver dans le gestionnaire de disponibilité: $(function() { ... code ... });

Source

2011-02-08 18:25:49

Pour une raison quelconque, j'ai copié le code exact et il ne fonctionne pas localement, mais travaille sur jsfiddle.net. Est-ce que la bibliothèque JQuery a un effet sur elle? –

@Ryan Avez-vous également copié le code HTML ci-dessus? Où avez-vous placé le code JavaScript (dans la tête ou au bas de BODY)? –

J'ai fait copier le code HTML et j'ai mis le code JavaScript dans la tête et le code HTML dans le corps. –

Vous n'affin la visibilité pour 1 des 2 éléments chacun temps. Quand vous cliquez sur la gauche, ça va disparaître, mais vous n'avez pas indiqué le bon côté à apparaître. Essayez:

<div onclick="toggle_visibility('left');toggle_visibility('right');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');toggle_visibility('left');"> 
    Right 
</div>

Source

2011-02-08 18:21:07 William

Depuis u tagged la question jquery prendre votre mal ouvert à une solution de jquery. Cela rendra cela très simple. Consultez l'exemple ci-dessous jsFiddle ...

http://jsfiddle.net/VztjL/

Bien sûr, vous aurez besoin pour le style mais css cliquant sur le div dans l'échantillon passe entre les deux divs

Source

2011-02-08 18:22:48 stephen776

Pour les démarreurs, l'étiquette de fermeture est manquante. Les choses pesantes, celles-là. Deuxièmement, vous devez garder trace de la div visible visible afin de pouvoir la masquer. Ce qui suit devrait fonctionner.

<html> 
<head> 
<script type="text/javascript"> 
    top.visible_div_id = 'right'; 
    function toggle_visibility(id) { 
    var old_e = document.getElementById(top.visible_div_id); 
    var new_e = document.getElementById(id); 
    if(old_e) { 
     console.log('old', old_e, 'none'); 
     old_e.style.display = 'none'; 
    } 
    console.log('new', new_e, 'block'); 
    new_e.style.display = 'block'; 
    top.visible_div_id = id;   
    } 
    </script> 
</head> 
<body onload="toggle_visibility('left');"> 

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');" > 
    Right 
</div> 


<div id="left" > 
    This is the content for the left side 
</div> 

<div id="right" > 
    This is the content for the ride side 
</div> 

</body> 
</html>

Source

2011-02-08 18:30:57 bbrame

Voici un petit exemple qui bascule entre deux documents html. La fonction est d'abord appelée lorsque le corps se charge. Vous devez remplacer 1.html et 2.html par les deux pages que vous voulez inverser. Si vous voulez un délai plus long, remplacez 3000 par ce que vous voulez. la valeur de la minuterie est en millisecondes, donc si vous voulez 20 secondes son 20000.

 <html> 
     <head> 
     <script type="text/javascript"> 
      top.visible_id = 'right'; 

      function toggle_visibility() { 

      var right_e = document.getElementById('right'); 
      var left_e = document.getElementById('left'); 
      if (top.visible_id == 'right') { 
       right_e.style.display = 'none'; 
       left_e.style.display = 'block'; 
       top.visible_id = 'left'; 
      } else { 
       right_e.style.display = 'block'; 
       left_e.style.display = 'none'; 
       top.visible_id = 'right'; 
      } 
      var t = setTimeout("toggle_visibility()",3000); 
      } 

      </script> 
     </head> 
     <body onload="toggle_visibility();"> 

     <div id="left" > 
      <iframe src="1.html"></iframe> 
     </div> 

     <div id="right" > 
      <iframe src="2.html"></iframe> 
     </div> 

     </body> 
     </html>

Source

2011-05-17 14:32:35 mezz

Comment basculer entre deux divs

Répondre

Questions connexes