js控制div的显示和隐藏

当鼠标移至黑色的div里面的时候对应的红色div显示,移出的时候隐藏。用js这么写。最好使用jQurey写。... 当鼠标移至黑色的div里面的时候对应的红色div显示,移出的时候隐藏。用js这么写。最好使用jQurey写。 展开
 我来答
纯洁的小树
2015-10-16 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:464万
展开全部

使用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,还可以通过修改元素的宽度和高度为零实现隐藏效果。

learneroner
高粉答主

2014-12-08 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6521万
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
圣鸾OJ
2015-10-07 · TA获得超过1629个赞
知道小有建树答主
回答量:1136
采纳率:96%
帮助的人:112万
展开全部
<!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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
静静然507
2014-12-08 · TA获得超过203个赞
知道小有建树答主
回答量:210
采纳率:0%
帮助的人:201万
展开全部
$(document).ready(function(){
$('.m-wrap'拍巧).each(function(){
$(this).mouseover(function(){
$(this).find("裂大.m-conten"袭源键).show();
});
});
});
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式