选项卡切换
点击不同的 li 切换不同的 div
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:400px;
height:400px;
}
a{
text-decoration:none;
}
li{
list-style-type:none;
width:100px;
height:50px;
text-align:center;
float: left;
line-height:50px;
}
ul{
width:400px;
height:50px;
}
ul li:nth-child(1){
background:yellowgreen;
}
ul li:nth-child(2){
background:yellow;
}
ul li:nth-child(3){
background:cyan;
}
ul li:nth-child(4){
background:greenyellow;
}
#bix{
width:400px;
height:350px;
position:relative;
}
#bix div{
width:400px;
height:350px;
text-align:center;
line-height:350px;
font-size:32px;
color:#fff;
position:absolute;
top:0;
left:0;
display:none;
}
#bix div:nth-child(1){
background:yellowgreen;
display:block;
}
#bix div:nth-child(2){
background:yellow;
}
#bix div:nth-child(3){
background:cyan;
}
#bix div:nth-child(4){
background:greenyellow;
}
</style>
</head>
<body>
<div id="box">
<ul id="box1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="bix">
<div class="bix1">我</div>
<div class="bix1">想</div>
<div class="bix1">睡</div>
<div class="bix1">觉</div>
</div>
</div>
<script type="text/javascript">
var oUl = document.getElementById('box1')
var oLi = oUl.getElementsByTagName('li')
for(let i=0;i<oLi.length;i++){
oLi[i].onclick = function(){
for(let j=0;j<oLi.length;j++){
oLi[j].classList.remove('box1')
}
this.classList.add('box1')
var bix1s = document.querySelectorAll('.bix1')
for(let j=0;j<bix1s.length;j++){
bix1s[j].style.display = 'none'
}
bix1s[i].style.display = 'block'
}
}
</script>
</body>
</html>