如何在两个div之间切换答案

【问题标题】：How to toggle between two divs如何在两个div之间切换
【发布时间】：2016-10-29 21:19:34
【问题描述】：

我正在尝试在两个 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>

【问题讨论】：

标签： javascript jquery toggle toggleclass

【解决方案1】：

现场演示： 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（隐藏正确的DIV onload）：

#right { display:none; }

将 JavaScript 代码放在页面底部。

    <script>
        $(function() {        
            // put jQuery code here    
        });
    </script>    
</body>

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

【讨论】：

出于某种原因，我复制了确切的代码，但它在本地无法运行，但正在 jsfiddle.net 上运行。 JQuery库对它有影响吗？
@Ryan 上面的 HTML 代码你也复制了吗？您将 JavaScript 代码放在哪里（在 HEAD 或 BODY 底部）？
我确实复制了 HTML，并将 JavaScript 代码放在头部，将 HTML 放在正文中。
@Ryan 在 HEAD 中的 JavaScript 代码是个坏主意。我将更新我的答案，说明 JavaScript 代码的放置位置。
好的，很好。另外，出于我的学习目的（仅编码 2 个月），您能否快速解释一下为什么将 Javascript 放在头脑中是个坏主意？

【解决方案2】：

这是一个在两个 html 文档之间切换的小例子。该函数在 body 加载时首先被调用。您需要将 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>

【讨论】：

【解决方案3】：

既然你标记了问题jquery，我假设你对 jquery 解决方案持开放态度。这将使这变得非常简单。查看下面的示例 jsfiddle...

http://jsfiddle.net/VztjL/

当然你需要一些 CSS 来设置样式，但是点击示例中的 div 会在两个 div 之间切换

【讨论】：

【解决方案4】：

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

其次，您需要跟踪当前可见的 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>

【讨论】：

【解决方案5】：

您每次只能切换 2 个元素中的 1 个的可见性。当您单击左侧时，它会消失，但您没有告诉右侧出现。试试：

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

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

【讨论】：