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

Answer 2

您的代码中似乎缺少某些内容，因为您要显示的链接和div之间没有任何关系。你需要更多的属性来维持它们之间的关系。

更好的方法是将一个共同的类应用于所有div，例如＆＃39; content-block＆＃39;和类等于使用以下代码。

$(".content-block:not(:first)").hide();

并点击链接

显示相应的div

$("#menu li").click(function(e){    
 $(".content-block").eq($(this).index()).show();
});

您也可以使用其他参数来关联它们而不是索引。

Answer 3

Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it

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

3 个答案: