点击a元素显示对应的div,点击其他地方隐藏div或者显示对应div用js控制怎么写?为啥alert()没有输出?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击a元素显示对应的div,点击其他地方隐藏div或者显示对应div用js控制怎么写?为啥alert()没有输出?相关的知识,希望对你有一定的参考价值。
<!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>
引入jquery.js会比较好写点
$(function()$('a').click(function()
$('#header').hide();
);
);
以上是关于点击a元素显示对应的div,点击其他地方隐藏div或者显示对应div用js控制怎么写?为啥alert()没有输出?的主要内容,如果未能解决你的问题,请参考以下文章