如何在两个div之间切换

Question

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

Answer 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 ... });