javascript - 在页面加载时显示第一个 div 并隐藏其他，然后在单击菜单项时显示其余部分

Question

我正在开发一个菜单，点击导航项时，将显示 div，但默认情况下，第一个 div 应该显示并隐藏。它们应该仅在点击其他导航项时可见。

下面是我到目前为止尝试过的代码。

HTML:

<ul id="menu">
                    <li class="page_item current_page_item justClick"><a href="#" data-id="div1">a</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div2">b</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div3">c</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div4">d</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div5">e</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div6">f</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div7">g</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div8">h</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div9">i</a></li>
                </ul>

<div class="content">

</div>

<div class="content1">
cccc1
</div>

<div class="content2">
cccc2
</div>

<div class="content3">
cccc3
</div>

<div class="content4">
cccc4
</div>

<div class="content5">
cccc5
</div>

<div class="content6">
cccc6
</div>

<div class="content7">
cccc7
</div>

<div class="content8">
cccc8
</div>

<div class="content9">
cccc9
</div>

脚本:

$('.justClick').bind('click', function() {      
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

CSS:

.content {
    background-color: red;
}

JSFiddle 链接:

http://jsfiddle.net/6uzU6/

我将在点击导航项时实现 onclick 功能，但所有的 div 都是可见的。

我想要的是，除了第一个 div(带有 .content 类)之外的所有 div 都应该被隐藏，并且当您单击导航项时，它应该会显示出来。

Answer 1

试试这个:

$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {      
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

DEMO