Comment faire pour basculer entre les deux divs

Je suis en train de basculer entre deux divs. Par exemple, onload, je veux que la gauche contenu à afficher et le contenu à droite restera cachée. Si je clique sur le droit de la div, je veux que la gauche de contenu à se cacher et à droite le contenu de comparaître 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...

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>

Ici, c'est le Javascript, je suis en utilisant:

<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>

OriginalL'auteur Ryan Bennett | 2011-02-08

6

Démo Live: 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>
```
JavaScript:
```
$('#toggle > span').click(function() {
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
});
```
CSS (pour masquer le droit DIV onload):
```
#right { display:none; } 
```
Mettre le code JavaScript en bas de la page.
```
    <script>
        $(function() {        
            //put jQuery code here    
        });
    </script>    
</body>
```
Remarquez comment l'élément SCRIPT est situé à l'extrémité de l'élément BODY. Notez également que le jQuery, le code doit être à l'intérieur du prêt gestionnaire: $(function() { ... code ... });

Pour une raison quelconque, j'ai copié le code exact et il ne fonctionne pas en local, mais travaille sur jsfiddle.net. La bibliothèque JQuery ont aucun effet sur elle?
Avez-vous également copié le code HTML ci-dessus? Où avez-vous placé le code JavaScript (dans la TÊTE ou dans le bas du CORPS)?
J'ai copier le code HTML et j'ai mis le code JavaScript dans la Tête et le code HTML dans le corps.
Du code JavaScript dans le HEAD est une mauvaise idée. Je vais mettre à jour ma réponse avec les instructions sur l'endroit où placer le code JavaScript.
Ok grande. Aussi, pour mon apprentissage (seulement été codage de 2 mois), pouvez-vous me donner une rapide explication de pourquoi c'est une mauvaise idée de mettre du Javascript dans le head?

OriginalL'auteur Šime Vidas

Voici un petit exemple qui permet de basculer entre les deux documents html. La fonction est d'abord appelée lorsque le corps de la charge. U besoin de remplacer 1.html et 2.html avec les deux pages que vous souhaitez inverser entre. Si vous souhaitez un délai plus long, remplacer 3000 avec tout ce que tu veux. la valeur du timer est en millisecondes, donc si vous voulez de 20 secondes de 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>

OriginalL'auteur mezz

1

Depuis u tagged la question jquery mauvais assumer votre ouvert à un jquery solution. Cela fera très simple. Découvrez l'exemple de jsfiddle ci-dessous...

http://jsfiddle.net/VztjL/

bien sûr, vous aurez besoin d'un peu de css pour le style, mais en cliquant sur le div dans l'échantillon permet de basculer entre les deux divs

OriginalL'auteur stephen776

Pour commencer, la balise de fermeture pour manque. Satanés choses, ceux.

Deuxièmement, vous avez besoin de garder une trace de l'actuel visible div de sorte que vous pouvez les masquer. Le suivant 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>

OriginalL'auteur bbrame

0

Vous êtes seulement le basculement de la visibilité pour 1 des 2 éléments à chaque fois. Lorsque vous cliquez sur la gauche, il va disparaître, mais vous ne dites pas le côté droit de comparaître. Essayez:
```
<div onclick="toggle_visibility('left');toggle_visibility('right');">
  Left
</div>

<div onclick="toggle_visibility('right');toggle_visibility('left');">
  Right
 </div>
```
OriginalL'auteur William

Vous devez vous connecter pour publier un commentaire.