js实现点击a版块的时候b版块会出现，点击a版块b版块以外的区域b版块消失

结构是这样的！<styletype="text/css">.a{width:20px;height:20px;background:#000;}.b{width:40px... 结构是这样的！

<style type="text/css">
.a{ width:20px; height:20px; background:#000;}
.b{ width:40px; height:40px; background:#F00; display:none;}
</style>
<div class="a"></div>
<div class="b"></div> 展开

 我来答

2个回答

#热议# 生活中有哪些实用的心理学知识？

匿名用户
推荐于2016-01-11

展开全部



<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
.a {
	width: 20px;
	height: 20px;
	background: #000;
}

.b {
	width: 40px;
	height: 40px;
	background: #F00;
	display: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	onload = function ()
    {
		var a = document.getElementById('a');
		var b = document.getElementById('b');
		a.onclick = function ()
		{
			b.style.display = 'block';
		}
		document.onclick = function (e)
		{
			e = e || window.event;
			var target = e.target || e.srcElement;
			if (target !== a && target !== b)
	        {
		        b.style.display = 'none';
	        }
		}
    }
</script>
</head>
<body>
	<div id="a" class="a"></div>
	<div id="b" class="b"></div>
</body>
</html>

已赞过 已踩过<

评论收起

hz0814537
2014-12-24 · TA获得超过556个赞

知道小有建树答主

回答量：626

采纳率：75%

帮助的人：288万

我也去答题访问个人页

关注

展开全部

<!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=utf-8" />
<title>无标题文档</title>
<script>
function change(n){
for(var i=1;i<5;i++){
var curA=document.getElementById("a"+i);
var curB=document.getElementById("view"+i);
if(i==n){
curA.className="down";
curB.style.display="block";
}else{
curA.className="up";
curB.style.display="none";
}

}
}
</script>
</head>

<style type="text/css">
ul li{
width:85px;
height:20px;
list-style-type:none;
float:left;
text-align:center;
margin-left:5px;
}
.down{
cursor:pointer; font-size:14px; color:red;
}
.up{
cursor:pointer; font-size:14px; color:#000;
}
</style>

<body>

<ul style=" width:500px; height:15px;">
<li class="a1" id="a1" style="cursor:pointer; font-size:14px;" onmousedown="return change(1)">主题分类</li>
<li style="color:#CCC;width:4px;">|</li>
<li class="a2" id="a2" style="cursor:pointer; font-size:14px;" onmousedown="return change(2)">机构分类</li>
<li style="color:#CCC;width:4px;">|</li>
<li class="a3" id="a3" style="cursor:pointer; font-size:14px;" onmousedown="return change(3)">组配分类</li>
<li style="color:#CCC;width:4px;">|</li>
<li class="a4" id="a4" style="cursor:pointer; font-size:14px; margin-left:20px;" onmousedown="return change(4)">服务对象分类</li>
</ul>

<div class="view1" id="view1" style="border:solid #CCC 1px; display:block;width:380px; height:200px; margin-left:60px; text-align:center;">主题分类</div>
<div class="view2" id="view2" style="border:solid #CCC 1px; display:none;width:380px; height:200px; margin-left:60px; text-align:center;">机构分类</div>
<div class="view3" id="view3" style="border:solid #CCC 1px; display:none;width:380px; height:200px; margin-left:60px; text-align:center;">组配分类</div>
<div class="view4" id="view4" style="border:solid #CCC 1px; display:none;width:380px; height:200px; margin-left:60px; text-align:center;">服务对象分类</div>

</body>
</html>
是这个意思吗？

追问

不是！

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js实现点击a版块的时候b版块会出现，点击a版块b版块以外的区域b版块消失

其他类似问题

为你推荐：