选项卡思路总结:
1.布局时合理利用height和边框,已经背景色#fff覆盖边框的颜色(背景色是覆盖在边框上的)
2.点击事件时,先排他,然后单个添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.tabs {
width:750px;
margin: 50px auto;
}
.tab-title {
height:40px;
line-height:40px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
.tab-title ul{
display: flex;
}
.tab-title li{
height:39px;
width:100px;
text-align: center;
background: #f5f5f5;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
.tab-title li.active{
height:40px;
/* 需要设置为#fff才能遮盖住边框的颜色 */
background: #fff;
}
.tab-contents{
width:750px;
}
.tab-contents li{
display: none;
height:300px;
line-height: 300px;
text-align: center;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.tab-contents li.current {
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab-title">
<ul>
<li class="active">未付款订单</li>
<li>未发货订单</li>
<li>未收货订单</li>
<li>未评论订单</li>
<li>未退货订单</li>
</ul>
</div>
<div class="tab-contents">
<ul>
<li class="current">这是未付款订单</li>
<li>这是未发货订单</li>
<li>这是未收货订单</li>
<li>这是未评论订单</li>
<li>这是未退货订单</li>
</ul>
</div>
</div>
<script>
//获取所有的title里的元素
var btns = document.querySelectorAll('.tab-title li');
//获取所有content里的内容
var contents = document.querySelectorAll('.tab-contents li');
//遍历btns,给btns绑定单击事件
btns.forEach(function(item,index){
item.onclick = function(){
btns.forEach(function(item,index){
//排他:去掉title里面的li的active
item.classList.remove('active');
//排他:去掉content里面的li的current
contents[index].classList.remove('current')
});
//给点击到的li添加单击事件
item.classList.add('active');
contents[index].classList.add('current')
}
})
</script>
</body>
</html>