如何切换两个div

我想切换两个div。例如，onload，我想要显示左侧内容，正确的内容将保持隐藏状态。如果我点击右边的div，我想让左边的内容隐藏并显示正确的内容，反之亦然。我对JavaScript非常陌生，但这里是我的。我似乎无法得到它的工作。请帮助...如何切换两个div

这里是我的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>

来源

2011-02-08 Ryan Bennett

现场演示之间切换：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>

Ĵ avaScript：

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

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

CSS（躲右DIV的onload）：

#right { display:none; }

把JavaScript代码在页面的底部。

注意脚本元素是如何位于主体元件的端部。另外，请注意，jQuery代码应位于ready handler中：$(function() { ... code ... });

来源

2011-02-08 18:25:49

出于某种原因，我复制了确切的代码，它不是在本地工作，但正在jsfiddle.net。 JQuery库对它有什么影响吗？ – 2011-02-08 20:41:23

您只能切换能见度为每个2元的1时间。当你点击左侧时，它会消失，但你没有告诉右侧出现。尝试：

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

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

来源

2011-02-08 18:21:07 William

由于你标记了问题jquery病假设你打开一个jQuery解决方案。这将使这非常简单。看看下面的样本的jsfiddle ...

http://jsfiddle.net/VztjL/

当然

你会需要一些CSS的样式，但点击该样品在div将两个div

来源

2011-02-08 18:22:48 stephen776

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

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

来源

2011-02-08 18:30:57 bbrame

这是一个在两个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>

来源

2011-05-17 14:32:35 mezz

如何切换两个div

回答

相关问题