<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>万年历</title>
<style>
.box{
width: 330px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
ul li{
list-style: none;
display: inline-block;
border: 1px solid black;
width: 120px;
height: 80px;
color: white;
text-align: center;
margin-bottom: 40px;
margin-right: 10px;
background: black;
}
ul li:hover{
background: pink;
color: white;
}
ul li h2{
margin-top: 5px;
}
.secshow{
margin: 0 auto;
width: 90%;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<section class="box">
<ul id="us">
<li>
<h2>春天</h2>
<p>万物复苏</p>
</li>
<li>
<h2>夏天</h2>
<p>炎热</p>
</li>
<li>
<h2>秋天</h2>
<p>干燥</p>
</li>
<li>
<h2>冬天</h2>
<p>寒冷</p>
</li>
</ul>
<section class="secshow" id="secshow">
</section>
</section>
</body>
</html>
<script>
//获取ul
let us=document.getElementById('us')
//获取底下显示盒子
let secshow=document.getElementById('secshow')
//获取ul底下的所有li
let lis=us.getElementsByTagName('li')
let j=['春天','夏天','秋天','冬天']
let des=['万物复苏','炎热','干燥','寒冷']
//遍历所有li
for(let i=0;i<lis.length;i++){
//给li添加动态索引
lis[i].index=i
//给每个li添加点击事件
lis[i].οnclick=function () {
//清空secshow
secshow.innerHTML=''
//创建一个h2
let h2=document.createElement('h2');
//当前选中的li的索引值等于数组对应的值
h2.innerText=j[this.index]
//创建一个p标签
let p=document.createElement('p')
//当前选中索引的值等于对象数组的值
p.innerText=des[this.index]
//追加进显示卡里
secshow.appendChild(h2)
secshow.appendChild(p)
}
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
