选项卡原理图,和布局结构参考
代码逻辑:
1、每一个按钮盒子绑定一个点击事件
2、点击任何一个按钮盒子时,所有按钮盒子取消高亮状态,所有内容盒子隐藏
3、点击任何一个按钮盒子时,当前按钮盒子高亮,当前索引对应内容盒子显示
HTML代码
<div class="box"><!-- 表示三个按钮盒子 --><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>
CSS代码 按照布局结构写的
<style>*{margin: 0;padding: 0;}ul,ol,li{list-style: none;}.box{width: 600px;height: 400px;border: 3px solid pink;margin: 50px auto;display: flex;flex-direction: column;}.box > ul {height: 60px;display: flex;}.box > ul > li {flex: 1;color: #fff;background-color: skyblue;font-size: 30px;display: flex;justify-content: center;align-items: center;cursor: pointer;}.box > ul > li.active{background-color: green;}.box > ol {flex: 1;position: relative;}.box > ol > li {width: 100%;height: 100%;background-color: black;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 100px;position: absolute;left: 0;top: 0;display: none;}.box > ol > li.active{display: flex;}</style>
JS代码 第一种
<script>//1、获取元素let btns = document.querySelectorAll('ul > li')let tabs = document.querySelectorAll('ol > li')//2-1、给btns里面所有按钮添加点击事件btns.forEach(function(item,index){item.onclick = function(){//2-2、给btns和tabs里面的所有内容取消active类名btns.forEach(function(t,i){t.className = '' tabs[i].className = '' })//2-3、当前点击的按钮和索引对应的盒子添加active类名item.className = 'active'tabs[index].className = 'active'}})</script>
JS代码 第二种
for(let i = 0; i < btns.length; i++){//纪录当前下标btns[i].index = i;//给btns里的所有元素添加点击事件btns[i].onclick = function(){//给btns和tabs里面的所有内容取消active类名for(let j = 0; j < btns.length; j++){btns[j].className = '';tabs[j].className = '';}//当前点击的按钮和索引对应的盒子添加active类名//this就是当前点击的按钮元素this.className = 'active';//this.index 当前点击的按钮元素所在的索引tabs[this.index].className = 'active'}}
