一、前言
Tab栏效果切换是常见的功能需求,它实际上运用的就是JS的排他思想。
那么,什么是排他思想呢?
简而言之,就是在监听成立时,先把所有的样式清除为空,随后按照需求添加需要的样式。
二、案例分析
1. 需求分析
鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
2. 功能实现
思路:1.点亮盒子。 2.利用索引值显示盒子。
步骤:
- 1.获取事件源和相关元素
- 2.绑定事件
- 3.书写事件驱动程序(排他思想)
HTML:
<div id="box" class="active">
<ul>
<li>鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<div class="clearfix"></div>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
复制代码
CSS:
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.clearfix {
clear: both;
}
#box {
width: 450px;
height: 500px;
background-color: #333;
margin: 100px auto;
border: 1px solid #ccc;
text-align: center;
}
#box ul {
width: 450px;
height: 50px;
text-align: center;
}
#box ul li {
width: 60px;
float: left;
color: #eee;
background-color: #333;
font-size: 25px;
line-height: 50px;
padding: 5px 15px;
cursor: pointer;
}
#box ul li:hover {
color: #333;
background-color: #ccc;
}
#box.active {
background-color: #ccc;
}
#box span {
display: none;
width: 450px;
height: 440px;
font-size: 50px;
line-height: 440px;
}
#box .show {
display: block;
}
复制代码
JS:
window.onload = function() {
//1.获取事件源和相关元素
var liArr = document.getElementsByTagName('li');
var spanArr = document.getElementsByTagName('span');
//2.绑定事件
for(var i = 0; i < liArr.length; i++) {
//3.书写事件驱动程序(排他思想)
liArr[i].index = i;
liArr[i].onmouseover = function() {
for(var j = 0; j < spanArr.length; j++) {
// 清除所有样式
liArr[j].classList = '';
spanArr[j].classList = '';
}
// 添加需要的样式
this.classList = 'active';
spanArr[this.index].className = 'show';
}
}
}
复制代码
三、小结
遇到此类需求时(TAB切换),第一反应就是要想到“排他思想”。
关键分两步走,第一步当事件监听时,用for循环遍历所有li元素和span元素,并清空其所有样式;
第二步,跳出循环,按照需求分别添加样式。