<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>简易选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 300px;
border: 1px solid #000;
margin: 10px auto;
}
#tab {
width: 100%;
display: block;
overflow: hidden;
background: #333;
}
#tab li {
float: left;
list-style: none;
height: 30px;
line-height: 30px;
}
#tab li a {
text-decoration: none;
padding: 0 34px;
color: #fff;
}
#tab li.sec {
background: #ddd;
}
#tab li.sec a {
color: #333;
}
#text {
width: 100%;
height: 200px;
background: #f2f2f2;
text-align: center;
}
#text>div {
display: none;
line-height: 150px;
}
#text>div.cur {
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul id="tab">
<li class="sec"><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
</ul>
<div id="text">
<div class="cur">
<h1>新闻内容</h1>
</div>
<div>
<h1>音乐内容</h1>
</div>
<div>
<h1>视频内容</h1>
</div>
</div>
</div>
<script>
let lis = document.getElementsByTagName('li');
let text = document.getElementById('text');
console.log(text);
let divs = text.getElementsByTagName('div');
let ul = document.getElementById('tab');
ul.addEventListener('click', function(e) { //事件委托
var e = e || window.event;
var tar = e.target || e.srcElement;
for (let i = 0; i < lis.length; i++) {
lis[i].className = '';
divs[i].className = '';
if (lis[i] == tar.parentNode) {
lis[i].className = 'sec';
divs[i].className = 'cur';
}
}
});
</script>
</body>
</html>
简易选项卡
最新推荐文章于 2021-06-21 10:53:45 发布