<style>
*{
margin: 0;
padding:0;
}
ul,ol,li{
list-style: none;
}
.cont{
800px;
height: 600px;
border: 5px solid #000;
margin: 30px auto;
display: flex;
flex-direction: column;
}
.cont>ul{
100%;
height: 60px;
display: flex;
}
.cont>ul>li{
flex:1;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: #fff;
background: skyblue;
}
.cont>ul>li.active{
background: blue;
}
.cont>ul>li:nth-child(2){
border-left:5px solid #000 ;
border-right:5px solid #000 ;
}
.cont>ol{
flex:1;
position: relative;
}
.cont>ol>li{
100%;
height: 100%;
position: absolute;
top:0;
left:0;
color: #000;
font-size: 150px;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.cont>ol>li:nth-child(1){
background: orange;
}
.cont>ol>li:nth-child(2){
background: pink;
}
.cont>ol>li:nth-child(3){
background: green;
}
.cont>ol>li.active{
display: flex;
}
</style>
</head>
<body>
<div class="cont">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">内容1</li>
<li >内容2</li>
<li >内容3</li>
</ol>
</div>
<script>
// tab切换 / 选项卡菜单
// 思路
// 点击 ul>li 给 ol>li 设定 class样式
// 点击 ul>li
// 1,给所有的 ul>li 清除样式,给当前点击的li,添加样式
// 2,给所有的 ol>li 清除样式,给当前点击的ul>li,对应的ol>li添加样式
// 关键原理:
// ul>li 和 ol>li 标签数量是完全相同的
// 存储标签的伪数组 oUlLis 和 oOlLis 索引下标是完全相同的
// 两个 伪数组 索引是一一对应的,可以相互通用
var oUlLis = document.querySelectorAll('ul>li');
var oOlLis = document.querySelectorAll('ol>li');
console.log(oUlLis , oOlLis);
// 循环遍历, ul>li 的伪数组
// item 存储的是 ul>li 标签 key 是标签对应的索引下标
oUlLis.forEach(function(item,key){
// 添加点击事件,点击标签,触发程序,给点击的标签,添加className的属性值
// 给 ul>li标签 添加点击事件
item.addEventListener('click' , function(){
// 点击标签时,清除所有标签的class样式
// 给所有的li标签都定义 className属性值 为 '' 空字符串
// 执行 循环,遍历所有的ul>li标签
oUlLis.forEach(function(i,k){
// 给li标签,清除class样式,设定className 为 空字符串
i.className = '';
// 使用 ul>li的索引下标,也可以调用ol>li的索引下标
// 调用 ol>li标签,也清除class样式,设定className 为 空字符串
oOlLis[k].className = '';
// 循环结束 ul>li ol>li 都没有 class样式
})
// 给点击的ul>li标签,添加class样式
item.className = 'active';
// 通过 item 的索引下标key,找对 ol中对应的li标签
// 添加class样式
oOlLis[key].className = 'active';
})
})
</script>