编程思想 之 排他思想

排他思想：当前元素为 A 状态, 其他元素为 B 状态 

使用详解：
1. 干掉所有人：使用 for循环
2. 复活他自己：通过 this 或者下标找到自己或者对应的元素

这种写法有个致命的缺点，就是每次运行此代码都会遍历一次数组，去掉每个元素的样式（包括自己），然后再给指定的元素添加样式，浏览器的重复执行了很多任务，代码运行效率不高。

例：

目标元素中，有一个元素默认被选中

1. 找到默认被选中的元素，将其用于选中的类名移除
2. 给当前被选中的元素添加用于选中的类名

<div class="tab">
    <button class="tab-item active">按钮1</button>
    <button class="tab-item">按钮2</button>
    <button class="tab-item">按钮3</button>
    <button class="tab-item">按钮4</button>
    <button class="tab-item">按钮5</button>
</div>

.active {
    color: red;
    font-size: 24px;
    background-color: skyblue;
}

//  获取 .tab 下的所有 .tab-item 元素
let tabS = document.querySelectorAll('.tab .tab-item');

// 给每个 .tab-item 添加点击事件
for (let i = 0; i < tabS.length; i++) {
    tabS[i].addEventListener('click', function() {
        // 找到 tab栏 中第一个 .active 将其删除
        document.querySelector('.tab .active').classList.remove('active');
        // 给当前被点击的元素添加 .active
        this.classList.add('active');
    });
}