使用 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 在 firstbody div 中，所以是的，它需要显示 firstbody。

<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/