<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title></title>
????<style>
?*{
????????????margin:?0;
?padding:?0;
?}
????????.main{
????????????width:?100%;
?margin:?0?auto;
?background-color:?palegreen;
?overflow:?hidden;
?}
????????ul?li?h1?{
????????????text-align:?center;
?cursor:?pointer;
?}
????????ul?li{
????????????border:?1px?solid?#999;
?background-color:?#e0ecff;
?}
????????ul?li?p{
????????????height:?200px;
?text-align:?center;
?display:?none;
?}
????????.active{
????????????background-color:?red;
?}
????</style>
</head>
<body>
<div?class="main">
????<ul>
????????<li>
????????????<h1>1點擊我使p顯示或者隱藏</h1>
????????????<p>1</p>
????????</li>
????????<li>
????????????<h1>2</h1>
????????????<p>2</p>
????????</li>
????????<li>
????????????<h1>3</h1>
????????????<p>3</p>
????????</li>
????</ul>
</div>
<script>
?var?ps=document.querySelectorAll('p');
?var?h1s=document.querySelectorAll('h1');
?for(var?j=0;j<h1s.length;j++){
?h1s[j].index=j
????????h1s[j].onclick=?function?()?{
?for(var?k=0;k<ps.length;k++){
?ps[k].style.display="none"
?}
?var?index=this.index;
?ps[index].style.display="block"
?}
????}
</script>
</body>
</html>
如何點擊當前h1對象使p內容顯示或者隱藏?
Willsf
2017-05-11 23:47:15
