jquery 在点击时显示/隐藏 div？
我正在尝试使用 jquery 来显示和隐藏 div onclick，虽然我没有收到任何错误，但它也没有显示或隐藏任何内容。
**编辑-更新**
$(document).ready(function() {
$("#nav-inner a").click(function() {
var type = $(this).attr("class");
$("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show();
return false;
});
});
这是 jquery：
$(document).ready(function() {
if($("#nav-inner")) {
$("#nav-inner ul li a").click(function(evt) {
var type = $(this).attr("class");
var rowcount = 0;
$('div.v1 .vc').each(function(idx,el) {
if(type == 'typea') {
if($(el).hasClass('typea')) {
$(el).show();
} else {
$(el).hide();
}
}
});
});
}
});
这是标记：
<div id="page">
<div id="header">
<div id="nav">
<div id="nav-inner">
<ul class="nav-inner-li">
<li>
<a class="typea" href="#"><img src="/images/typea.png"></a>
<a class="typea" href="#">Type A</a>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="content-content">
<div id="content-left">
<div class="v1">
<div class="vc">
<div class="typea">
<div class="title"> Title </div>
<div class="body"> Body </div>
</div>
<div class="typeb">
<div class="title"> Title 2 </div>
<div class="body"> Body 2 </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to use jquery to show and hide a div onclick, and, although I'm not getting any errors, it's not showing or hiding anything either.
**EDIT - UPDATED **
$(document).ready(function() {
$("#nav-inner a").click(function() {
var type = $(this).attr("class");
$("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show();
return false;
});
});
Here's the jquery:
$(document).ready(function() {
if($("#nav-inner")) {
$("#nav-inner ul li a").click(function(evt) {
var type = $(this).attr("class");
var rowcount = 0;
$('div.v1 .vc').each(function(idx,el) {
if(type == 'typea') {
if($(el).hasClass('typea')) {
$(el).show();
} else {
$(el).hide();
}
}
});
});
}
});
And here's the markup:
<div id="page">
<div id="header">
<div id="nav">
<div id="nav-inner">
<ul class="nav-inner-li">
<li>
<a class="typea" href="#"><img src="/images/typea.png"></a>
<a class="typea" href="#">Type A</a>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="content-content">
<div id="content-left">
<div class="v1">
<div class="vc">
<div class="typea">
<div class="title"> Title </div>
<div class="body"> Body </div>
</div>
<div class="typeb">
<div class="title"> Title 2 </div>
<div class="body"> Body 2 </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这可以变得更简单。
您的第一个错误是
#nav-inner ul，其中#nav-inner实际上是ul元素。上面的代码从单击的链接中获取类，然后选择具有该类的div.v1的子级并切换它（如果隐藏则显示它，如果不隐藏则隐藏它）。This can be made much simpler.
Your first error was
#nav-inner ulwhere#nav-inneris actually theulelement. The above grabs the class from the clicked link and then selects the child ofdiv.v1with that class and toggles it (shows it if hidden, hides it if not).这是一个更简单的例子..
This is a simpler example ..