核心思路一
- 获取目标元素,得到一个存储元素对象数的组;
- 我们先把所有目标元素的指定样式初始化 (干掉所有人);
- 再重新给指定的元素对象添加自己想要的样式(留下我自己);
这种写法有个致命的缺点,就是每次运行此代码都会遍历一次数组,去掉每个元素的样式(包括自己),然后再给指定的元素添加样式,浏览器的重复执行了很多任务,代码运行效率不高。
示例:
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素,btns得到的是伪数组 里面的每一个元素 btns[i]
let btns = document.getElementsByTagName('button');
// 给每个元素添加点击事件
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 2. 我们先把所有的按钮背景颜色去掉 干掉所有人
for (let j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
// 3. 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
核心思路二:
遍历每一个目标元素,判断这个元素与 this 是不是同一个;是则修改样式,不是则初始化样式。
// 获取所有按钮元素,btns得到的是伪数组 里面的每一个元素 btns[i]
let btns = document.getElementsByTagName('button');
// 给每个元素添加点击事件
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (let j = 0; j < btns.length; j++) {
// 判断当前元素是否被点击
if (btns[j] === this) {
// 是则修改样式
this.style.backgroundColor = 'skyblue';
} else {
// 不是则初始化样式
btns[j].style.backgroundColor = '';
}
}
}
}
第二种排他思想跟只是增加了 if 判断;判断是自己就修改样式,不是自己就设置默认样式,但是大大提高了代码效率。
另一种情况
目标元素中,有一个元素默认被选中
- 找到默认被选中的元素,将其 用于选中 的类名移除
- 给当前被选中的元素添加 用于选中 的类名
<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');
});
}