使用jQuery制作Div按钮 - .show/.toggle/.hide？

Question

我有4个按钮，这是与CSS风格的div。我想要的是显示/隐藏每个按钮单击时包含在另一个Div中的数据。

我使用jQuery做到这一点，在现阶段，我有以下代码：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#aboutbody").hide(); 
    }); 
</script> 
<script> 
    $(document).ready(function() { 
     var $aboutbody = $('#aboutbody'); 
     $('#about').on('click', function() { 
      $aboutbody.show(); 
     }); 
    }); 
</script> 

#about是我的按钮，#aboutbody是我想显示的内容。我试着复制上面的代码为我的所有按钮，这种工作类型，但他们只显示时点击相应的顺序？

Answer 1

$(document).ready(function(){}); 

应该只用一次。你输入的是当文档“准备就绪”（加载）时将执行的代码。

您的#secondbody div位于第一个div中，所以是的，它需要首先显示。

<div id="firstbody"> 
    <div class=".main"> 
     Information to be displayed when First is clicked ont 
    </div> 
</div><br><br> 

<div id="secondbody"> 
    <div class=".main"> 
     <span>Information to be displayed when second is clicked</span> 
    </div> 
</div> 

<div id="thirdbody"> 
    <div class=".main"> 
     <span>Information to be displayed when Third is clicked</span> 
    </div> 
</div> 

这里是小提琴：http://jsfiddle.net/gyLz4/1/