4

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

5 回答 5

6

现场演示：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 ... });

于 2011-02-08T18:25:49.087 回答
3

这是一个在两个 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>
于 2011-05-17T14:32:35.457 回答
2

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

http://jsfiddle.net/VztjL/

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

于 2011-02-08T18:22:48.640 回答
1

对于初学者来说，结束标签 for 是缺失的。讨厌的东西，那些。

其次，您需要跟踪当前可见的 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-08T18:30:57.513 回答
0

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

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

<div onclick="toggle_visibility('right');toggle_visibility('left');">
  Right
 </div>
于 2011-02-08T18:21:07.703 回答