javaScript动态列表(li)及其内容切换实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态列表及其内容切换</title>
<style>
.tab{width: 500px;border: 1px solid orange;height: 200px;}
.tab ul,.tab li{list-style: none;margin: 0px;padding: 0px;}
.tab .tab-header ul li {float: left;width: 100px;text-align: center;background-color: #ccc;padding: 6px 0px;}
.tab .tab-header ul li a {color: blue;text-decoration: none;display: block;}
.tab .tab-header ul li.hot{background-color: white;border-top: 2px orange solid;padding-top: 4px;}
</style>
<script>
window.onload = function(){
//获取所有的li标签
let lis=document.querySelectorAll(" .tab .tab-header ul li");
//获取所有的div-body里面的div标签
let divs=document.querySelectorAll(".tab .tab-body div");
for(let i = 0; i<lis.length;i++){
//给每个li标签设置单击事件
lis[i].addEventListener('click',function(){
for(let j=0;j<lis.length;j++){
lis[j].className='';
divs[j].style="display:none;";
this.className='hot';
divs[i].style="display:block;";
}
});
}
}
</script>
</head>
<body>
<div class="tab">
<div class="tab-header">
<ul>
<li class="hot"><a href="#">体育</a></il>
<li><a href="#">财经</a></il>
<li><a href="#">新闻</a></il>
<li><a href="#">娱乐</a></il>
<li><a href="#">天气</a></il>
</ul>
</div>
<div class="tab-body">
<div style="display:block;"> 体育相关信息</div>
<div style="display: none;">财经相关信息</div>
<div style="display: none;">新闻播报</div>
<div style="display: none;">娱乐节目</div>
<div style="display: none;">天气预报</div>
</div>
</div>
</body>
</html>