一、前言
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元素，并清空其所有样式；
第二步，跳出循环，按照需求分别添加样式。
