如何在两个div之间切换？

Question

如何在两个div之间切换？

4

我正在尝试在两个div之间切换。例如，当页面加载时，我希望左侧内容显示，并且右侧内容将保持隐藏。如果我点击右侧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>

- Ryan Bennett

5个回答

3

这里是一个小例子，可以在两个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>

- mezz

2

既然您标记了问题jquery，我会假设您希望使用jquery解决方案。这将使问题非常简单。请查看下面的示例jsfiddle...

http://jsfiddle.net/VztjL/

当然，您需要一些CSS进行样式设置，但在示例中单击div将在两个div之间切换。

- stephen776

1

首先，缺少闭合标签。这些东西真是讨厌。

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

- bbrame

0

每次你只是切换了两个元素中的一个的可见性。当你点击左边时，它会消失，但你没有告诉右边要出现。尝试：

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

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

- William

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Šime Vidas · Accepted Answer

实时演示：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，当页面加载时）：

#right { display:none; }

将JavaScript代码放在页面底部。

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

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