通常我们用 js 写 tab 栏切换功能会用到排他思想，即干掉其他人，留下我自己
但也可以用一个更有效率的方法：找出那个特殊的人，精准干掉他，放过其他无辜的人，然后留下我自己
实现过程：假设需要切换的样式类为active类，要干掉那个唯一的active类
document.querySelector('.active').classList.remove('active')
之后再去给自己设置 active类 就可以啦！
// this指需要切换的tab元素this.classList.add('active')
柯南tab栏案例练习：
代码示例：
HTML：
<div class="card"><ul class="tab"><li class="tab-items active">柯南</li><li class="tab-items">小兰</li><li class="tab-items">小哀</li><li class="tab-items">基德</li></ul><div class="info"><div class="main active"><p>外表看似小孩，其真实身份是高中生侦探——工藤新一。</p></div><div class="main"><p>新一的青梅竹马，一直喜欢着新一，在他突然消失后等待着他的归来。</p></div><div class="main"><p>外表是小孩，但其实是黑衣组织的一员，新一被灌下的毒药（APTX4869）的开发者，代号雪莉。</p></div><div class="main"><p>变装达人。轰动世界的神出鬼没的怪盗。总是会送上预告函，将警察玩弄于股掌之间，被世人称作“怪盗基德”。</p></div></div></div>
JS：
// 获取元素let tabs = document.querySelectorAll('.tab .tab-items')let mains = document.querySelectorAll('.info .main')// 监听tab栏点击事件for (let i = 0; i < tabs.length; i++) {tabs[i].addEventListener('click', function(){// 切换tab栏样式// 将原本有active类的那个tab的active类移除掉document.querySelector('.tab-items.active').classList.remove('active')// 给触发点击事件的tab增加active类this.classList.add('active')// 切换下方内容区// 隐藏原本显示的那个内容区document.querySelector('.main.active').classList.remove('active')// 显示当前tab对应的内容区mains[i].classList.add('active')})}
CSS：
* {margin: 0;padding: 0;}li {list-style: none;}.card {width: 400px;margin: 100px auto;}.tab {display: flex;justify-content: space-between;align-items: stretch;width: 400px;height: 50px;}.tab .tab-items {width: 94px;line-height: 50px;background-color: rgb(207, 139, 138);font-size: 18px;text-align: center;text-decoration: none;cursor: pointer;}.tab .tab-items.active {background-color: rgb(171, 197, 222);}.info {height: 250px;}.info .main {display: none;width: 400px;height: 250px;padding: 15px;box-sizing: border-box;background-color: rgb(171, 197, 222);font-size: 21px;}.info .main.active {display: block;}
结束；
