<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link charset="text/css" href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
$("#show h3").bind("click",function(){
$(this).next("div.content").show();
});
});
</script>
</head><body oncontextmenu=self.event.returnValue=false onselectstart="return false"><div id="divbox">
<div id="inner">
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div></div>
</div>
</body>
</html>
我想单击带有<h3>的div的时候,他里面的那个div层隐藏显示,为什么我上面绑定的事件不行呢?请高手帮帮忙
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link charset="text/css" href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
$("#show h3").bind("click",function(){
$(this).next("div.content").show();
});
});
</script>
</head><body oncontextmenu=self.event.returnValue=false onselectstart="return false"><div id="divbox">
<div id="inner">
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div></div>
</div>
</body>
</html>
我想单击带有<h3>的div的时候,他里面的那个div层隐藏显示,为什么我上面绑定的事件不行呢?请高手帮帮忙
$(function(){
$("h3").bind("click",function(){
$(this).next("div.content").show();
});
});
重复了,所以不行
你的div本身就是现实的,
你把
$(this).next("div.content").show();
改为$(this).next("div.content").hide();
试下
改为<div showid="show">$(function(){
$("[showid=show] h3").bind("click",function(){
$(this).next("div.content").show();
});
});
$().ready(function(){
//你应该循环遍历你的每一个H3元素来添加事件吧,JQuery好像还没智能到这种程度。
$.each($("h3"), function(i,n){
$(n).bind("click",function(){
//元素切换显示/隐藏状态建议使用toggle
$(this).next("div").toggle(500);
})
});
})
$("#show h3").bind("click",function(){
$(this).next("div.content").style.display="block";
});
});
</script>
这样看看行不行
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link charset="text/css" href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
$("#show h3").bind("click",function(){
$(this).next("div.content").toggle();
});
});
</script>
</head><body oncontextmenu=self.event.returnValue=false onselectstart="return false"><div id="divbox">
<div id="inner">
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div>
<div id="show">
<h3>first</h3>
<div class="content">此处显示新 Div 标签的内容</div>
</div></div>
</div>
</body>
</html>
用toggle!
<script type="text/javascript">
$(function() {
$("[showid='show'] h3").bind("click", function() {
$(this).next("div.content").toggle();
});
});
</script>
<div id="divbox">
<div id="inner">
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>
<div showid="show">
<h3>
first</h3>
<div class="content">
此处显示新 Div 标签的内容</div>
</div>