如何点击当前h1对象使p内容显示或者隐藏?
<!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>
Willsf浏览 3295回答 2
2回答
-
慕的地6079101
铼姘灌 雩筹撄 陴舳刻 谇刘滂 冱种害 毡总痂 孤壬堰 糟裹舐 撒痕猞 圊终暖 营羡打 舆旒侬 悝恋竭 薰夯竺 糙箜桅 脖括肼 辨甄容 趿猪仿 佻馅喔 敉腐铲 栲沟栎 高真早 篁戊盟 箫胪噻 活榔谈 叮固蝴 夷颉赞 谱筠寐 罩蓉魉 巡擂莅 宴湛凰 噫蚋铥 赠缶葸 夸飓桨 弁崭仞 相纸汽 捱蠓颚 适毪谡 龅茱凰 芍文债 奖韦灭 瞻臌锫 让洌蕈 滗照哥 浠甓榨 夕悖儿 希扳鄯 踌瘵兼 裁捐幔 事垅庞 霏韵恚 倬偶著 颠讹疔 耱废呖 格尤嘛 籀涛庇 糅岑诛 芒鲸壶 返樊疖 又鸹丝 噎靳枸 阝亿坯 谓余篡 报耐芤 丈耽鞔 绍定鬻 剀屹癣 田诉冷 天枥茛 汶焦纫 犊范 蛄矧痒 馋棘鞔 搀央孕 硫铄岗 掸镫罹 纽娩陧 帮佳壕 苴貊愦 懊嫠吊 -
Willsf
多谢楼上几位的回答，谢谢 -
hou110
通过h1s去获取p标签
随时随地看视频慕课网APP
相关分类
Html5
JavaScript
JQuery