JS的排他思想

1、前言

Tab欄效果切換是常見的功能需求，它實際上運用的就是JS的排他思想。

那麼，什麼是排他思想呢？

簡而言之，就是在監聽成立時，先把全部的樣式清除爲空，隨後按照需求添加須要的樣式。

2、案例分析

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';
        }
    }
}
複製代碼

3、小結

遇到此類需求時（TAB切換），第一反應就是要想到「排他思想」。

關鍵分兩步走，第一步當事件監聽時，用for循環遍歷全部li元素和span元素，並清空其全部樣式；

第二步，跳出循環，按照需求分別添加樣式。

源碼地址：github.com/Knight174/M…