js控制div的显示和隐藏
当鼠标移至黑色的div里面的时候对应的红色div显示，移出的时候隐藏。用js这么写。最好使用jQurey写。...
当鼠标移至黑色的div里面的时候对应的红色div显示，移出的时候隐藏。用js这么写。最好使用jQurey写。
展开
展开全部
使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。
display属性 定义和用法
display 属性规定元素应该生成的框的类型。
display属性 可能的值
JavaScript控制div的隐藏
比如我们有一个id为div1的div元素
<div id="div1"></div>
隐藏，代码如下
document.getElementById("div1").style.display="none";显示，代码如下
document.getElementById("div1").style.display="block";其他方式
除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.wrap{width:400px;margin:120px auto;}
.m-wrap{width:100px;min-height:100px;padding:5px 25px;margin:20px;float:left;border:2px solid #000;}
.m-content{width:100px;min-height:50px;border:1px solid #ff0000;}
</style>
<script>
$(document).ready(function(e){
$(".m-content").hide();
$(".m-wrap").hover(function() {
$(this).find(".m-content").show();
}, function() {
$(this).find(".m-content").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="m-wrap">m-wrap
<div class="m-content">m-content</div>
</div>
<div class="m-wrap">m-wrap
<div class="m-content">m-content</div>
</div>
<div class="m-wrap">m-wrap
<div class="m-content">m-content</div>
</div>
<div class="m-wrap">m-wrap
<div class="m-content">m-content</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>js显示隐藏层</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showdiv(targetid,objN){
var target=document.getElementById(targetid);
var clicktext=document.getElementById(objN)
if (target.style.display=="block"){
target.style.display="none";
clicktext.innerText="点击查看详细信息";
} else {
target.style.display="block";
clicktext.innerText='关闭详细信息信息';
}
}
-->
</script>
<style type="text/css">
<!--
body { font: normal 14px "宋体" }
a { text-decoration: none; }
#showtext { cursor: hand; cursor:pointer;}
#showtext2 { cursor: hand; cursor:pointer;}
#contentid { margin-top: 10px; width:100%; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
#contentid2 { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
.none { display: none; }
-->
</style>
</head>
<body>
<a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
<div id="contentid" class="none">打开的内容</div>
<p></p>
<a id="showtext2" onClick="showdiv('contentid2','showtext2')">点击查看详细信息</a>
<div id="contentid2" class="none">1<br />
2.<br />
3.<br />
4.<br />
5.<br />
6. <br />
7.<br />
8. <br />
9.<br />
10.<br />
11.<br />
12. <br />
13.<br />
14. <br />
15.<br />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js显示隐藏层</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showdiv(targetid,objN){
var target=document.getElementById(targetid);
var clicktext=document.getElementById(objN)
if (target.style.display=="block"){
target.style.display="none";
clicktext.innerText="点击查看详细信息";
} else {
target.style.display="block";
clicktext.innerText='关闭详细信息信息';
}
}
-->
</script>
<style type="text/css">
<!--
body { font: normal 14px "宋体" }
a { text-decoration: none; }
#showtext { cursor: hand; cursor:pointer;}
#showtext2 { cursor: hand; cursor:pointer;}
#contentid { margin-top: 10px; width:100%; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
#contentid2 { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
.none { display: none; }
-->
</style>
</head>
<body>
<a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
<div id="contentid" class="none">打开的内容</div>
<p></p>
<a id="showtext2" onClick="showdiv('contentid2','showtext2')">点击查看详细信息</a>
<div id="contentid2" class="none">1<br />
2.<br />
3.<br />
4.<br />
5.<br />
6. <br />
7.<br />
8. <br />
9.<br />
10.<br />
11.<br />
12. <br />
13.<br />
14. <br />
15.<br />
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function(){
$('.m-wrap').each(function(){
$(this).mouseover(function(){
$(this).find(".m-conten").show();
});
});
});
$('.m-wrap').each(function(){
$(this).mouseover(function(){
$(this).find(".m-conten").show();
});
});
});
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
