记录导师讲到的一个思路-->排他思想
需求
在鼠标点击按钮时，该按钮颜色高亮，其他按钮为默认样式
方法1
炸弹法🤣
杀死兄弟，复活自己
原理：用一个炸弹，把自己&兄弟的样式全部干掉。而这个炸弹就是那个循环清除所有按钮样式 。随后自己使用复活甲，把自己复活就是单独给自己添加样式。
（哎哟，本来想把那个代码改颜色突出一下的，可是我不会😅）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1-获取元素
let btnList = document.querySelectorAll('button')
// 2-循环注册事件
for (let i = 0; i < btnList.length; i++) {
btnList[i].onclick = function () {
//2.1在点击时，清除所有按钮样式
> for (let j = 0; j < btnList.length; j++) {
> btnList[j].style.backgroundColor = ''
> }
//2.2再给自己添加样式
btnList[i].style.backgroundColor = 'orange'
}
}
</script>
</body>
</html>
方法2
狙击法
原理：把样式放在类名里，谁需要就给谁添加。 用document.querySelector()精确的找到携带类名的元素， 再使用classList.remove()干掉类名。 最后给自己classList.add()添加类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
> .orange {
> background-color: orange;
> }
</style>
</head>
<body>
<button class="orange">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
// 1-获取元素
let btnList = document.querySelectorAll('button')
// 2-循环注册事件
for (let i = 0; i < btnList.length; i++) {
btnList[i].onclick = function () {
// 2-1 利用查询选择器（配合交集选择器精准选择）携带样式的元素
// 给他取消样式（移除类名）
> document.querySelector('button.orange').classList.remove('orange')
// 2-2 再给自己添加类名
this.classList.add('orange')
}
}
</script>
</html>
总结
用在tab栏
