点击a元素显示对应的div,点击其他地方隐藏div或者显示对应div用js控制怎么写？为什么alert（）没有输出？
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=dev...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>工作</title>
<style type="text/css">
.details{
border: 1px green solid;
height: 300px;
background-color: yellow;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var details=document.getElementsByClassName("details");
for (var i=0;i<details.length;i++) {
details[i].previousSibling.onclick=function(){
alert(this.nextSibling.style.display);
if(this.nextSibling.getAttribute("style.diply")==null){
this.nextSibling.style.display="block";
}
else {
this.nextSibling.style.display="none";
}
};
}}
</script>
</head>
<body >
<div id="header">
</div>
<div id="content">
<ul class="ul-row">
<li><a>财务</a><div id="0" class="details" >02222</div></li>
<li><a>人事</a><div id="1" class="details">1</div></li>
<li><a>行政</a><div id="2" class="details">2</div></li>
</ul>
<ul class="ul-row">
<li id="0sds"><a id="a3" >生产</a><div id="3" class="details">3</div></li>
<li><a>餐饮</a><div id="4" class="details">4</div></li>
<li><a>建设</a><div id="5" class="details">5</div></li>
</ul>
<ul class="ul-row">
<li><a>送快递</a><div id="6" class="details">6</div></li>
<li><a>销售</a><div id="7" class="details">7</div></li>
<li><a>表演</a><div id="8" class="details">8</div></li>
</ul>
</div>
<div id="footer">
</div>
</body>
</html> 展开
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>工作</title>
<style type="text/css">
.details{
border: 1px green solid;
height: 300px;
background-color: yellow;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var details=document.getElementsByClassName("details");
for (var i=0;i<details.length;i++) {
details[i].previousSibling.onclick=function(){
alert(this.nextSibling.style.display);
if(this.nextSibling.getAttribute("style.diply")==null){
this.nextSibling.style.display="block";
}
else {
this.nextSibling.style.display="none";
}
};
}}
</script>
</head>
<body >
<div id="header">
</div>
<div id="content">
<ul class="ul-row">
<li><a>财务</a><div id="0" class="details" >02222</div></li>
<li><a>人事</a><div id="1" class="details">1</div></li>
<li><a>行政</a><div id="2" class="details">2</div></li>
</ul>
<ul class="ul-row">
<li id="0sds"><a id="a3" >生产</a><div id="3" class="details">3</div></li>
<li><a>餐饮</a><div id="4" class="details">4</div></li>
<li><a>建设</a><div id="5" class="details">5</div></li>
</ul>
<ul class="ul-row">
<li><a>送快递</a><div id="6" class="details">6</div></li>
<li><a>销售</a><div id="7" class="details">7</div></li>
<li><a>表演</a><div id="8" class="details">8</div></li>
</ul>
</div>
<div id="footer">
</div>
</body>
</html> 展开
2个回答
展开全部
用document的onmousedown 响应鼠标在页面上的点击事件 IE中用event.srcElement； FF中用e.target； 能获得鼠标点击的对象 然后你判断该对象是否为选择城市的这个div 不是的话就隐藏该 div 我想怎么用jquery你应该知道 吧 $(document).mousedown( function(event){ alert(event.target.id); //这样会弹出你单击的元素的id,你可以在这里写你的程序了 } ); );
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
引入jquery.js会比较好写点
$(function(){
$('a').click(function(){
$('#header').hide();
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
