一.排他思想在Tab栏效果切换比较常见，还有就是点击按钮的时候，步骤如下
1.先清空所有的样式，
2.在给当前元素设置样式，
3.主要顺序是不能颠倒的，因为它是从上往下执行的 先干掉所有人 ，然后只留下自己设置样式
总结就是：先把原先的所有样式去掉，在设置当前的样式
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
// 1.获取元素
var btn = document.getElementsByTagName('button')
// 2.每一个按钮都要绑定事件
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
// 3.点击前先把每一个按钮设置为无色
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
// 4.在添加样式 为红色
this.style.backgroundColor = 'red';
}
}
</script>
</body>
</html>
