Fatal编程技术网
  • javascript/
  • Javascript 如何在两个div之间切换

Javascript 如何在两个div之间切换

javascript jquery

Javascript 如何在两个div之间切换,javascript,jquery,toggle,toggleclass,Javascript,Jquery,Toggle,Toggleclass,我试图在两个div之间切换。例如，onload，我希望左侧内容显示，右侧内容保持隐藏。如果单击右div，我希望左侧内容隐藏，右侧内容显示，反之亦然。我对javascript非常陌生，但这里是我所拥有的。我似乎无法让它工作。请帮忙 以下是我的HTML代码： <div onclick="toggle_visibility('left');"> Left </div> <div onclick="toggle_visibility('right');">

我试图在两个div之间切换。例如，onload，我希望左侧内容显示，右侧内容保持隐藏。如果单击右div，我希望左侧内容隐藏，右侧内容显示，反之亦然。我对javascript非常陌生，但这里是我所拥有的。我似乎无法让它工作。请帮忙

以下是我的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>
下面是我正在使用的Javascript：

<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>
每次仅切换2个图元中1个图元的可见性。当你点击左边，它会消失，但你没有告诉右边出现。尝试：

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

<div onclick="toggle_visibility('right');toggle_visibility('left');">
  Right
 </div>
既然你把问题标记为jquery，我就假设你对jquery解决方案持开放态度。这会让事情变得非常简单。查看下面的示例JSFIDLE

当然，您需要一些css来设置样式，但单击示例中的div将在两个div之间切换

HTML:

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

<div id="left"> LEFT CONTENT </div>
<div id="right"> RIGHT CONTENT </div>
CSS隐藏右DIV onload：

#right { display:none; }
将JavaScript代码放在页面底部

请注意脚本元素如何位于BODY元素的末尾。另外，请注意jQuery代码应该在ready处理程序中：$function{…code…}

对于初学者，缺少的结束标记。讨厌的东西，那些

其次，您需要跟踪当前可见div，以便可以隐藏它。以下几点应该行得通

<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>
下面是一个在两个html文档之间切换的小示例。当主体加载时，首先调用该函数。您需要将1.html和2.html替换为要在其中翻转的两个页面。如果你想要更长的延迟，用你想要的替换3000。计时器值以毫秒为单位，因此如果需要20秒，则其值为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>
出于某种原因，我复制了确切的代码，它在本地不工作，但在jsfiddle.net上工作。JQuery库对它有影响吗？@Ryan您也复制了上面的HTML代码吗？你把JavaScript代码放在头上还是身体底部了？我复制了HTML，把JavaScript代码放在头上，把HTML放在身体里。@Ryan把JavaScript代码放在头上是个坏主意。我将更新我的答案，并说明如何放置JavaScript代码。好的，太好了。另外，为了我的学习目的，我只写了2个月的代码，你能给我一个快速的解释，为什么把Javascript放在头上是个坏主意吗？ 
<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>

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