1、排他思想
如果有同一组元素,想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (保留我自己)
- 注意顺序不能颠倒
思路:
a. 选择需要的一类标签,获得一个伪数组;
b. 用for()循环遍历获得的伪数组,排除其他(包括自己)的所有样式;
c. 遍历后用this改变自己的样式。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.change {
background-color: skyblue;
}
</style>
<script>
window.onload = function () {
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].index = i; //记录索引号
btns[i].onclick = function () {
//把所有按钮的颜色去掉 --->干掉所有人(包括自己)
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
}
//改变当前颜色 ---> 保留我自己
this.className = 'change';
}
}
}
</script>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
</html>
2、应用
应用案例
新浪新闻页:如图
实现方法:
最外面一个大盒子,大盒子里上面一个放按钮,下面一个盒子放div,且上下个数对应。移动鼠标,按钮颜色变化且相应的盒子出现。
2.1 单Tab栏
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document