js控制div的显示和隐藏

当鼠标移至黑色的div里面的时候对应的红色div显示，移出的时候隐藏。用js这么写。最好使用jQurey写。

举报该问题

推荐答案 2015-10-16

使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。

display属性定义和用法

　　display 属性规定元素应该生成的框的类型。

display属性可能的值

JavaScript控制div的隐藏

比如我们有一个id为div1的div元素

　　隐藏，代码如下

document.getElementById("div1").style.display="none";

　　显示，代码如下

document.getElementById("div1").style.display="block";

其他方式

除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/C0Xhh0f6066Xf66XI2.html

其他回答

第1个回答 2014-12-08

<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>

第2个回答 2015-10-07

<!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">

</script>
<style type="text/css">

</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>

第3个回答 2014-12-08

$(document).ready(function(){
$('.m-wrap').each(function(){
$(this).mouseover(function(){
$(this).find(".m-conten").show();
});
});
});本回答被提问者采纳

相似回答

js控制div的显示和隐藏答：使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。display属性定义和用法 display 属性规定元素应该生成的框的类型。display属性可能的值 JavaScript控制div的隐藏比如我们有一个id为div1的div元素 <div id="div1"></div>隐藏，代码如下 document.getElementById("div1").style.dis...

如何实现js控制div的隐藏及显现答：1、首先，打开html编辑器，新建一个html文件，例如：index.html。2、在index.html文件的<script>标签中，写入js：('button').click(function () { ('div').hide();('div').eq(parseInt(3 * Math.random())).show();});3、浏览器运行index.html页面，此时点击btn按钮总会显示其中1个div和...

大家正在搜

简单js控制div的显示与隐藏 js控制div显示隐藏实现 js控制div元素显示隐藏 js显示和隐藏div 控制div显示隐藏 js控制div隐藏 js控制div显示 js怎样显示隐藏多个div js设置div显示隐藏