我們有一個(gè)ul，ul里面有五個(gè)li，都是寬100px，高50px，背景顏色為粉色：

image.png

現(xiàn)在我們想通過點(diǎn)擊其中的li，讓這個(gè)被點(diǎn)擊的li寬度變?yōu)?00px，顏色變?yōu)樘焖{(lán)色，如果我們點(diǎn)擊后依次去換每個(gè)屬性，實(shí)在太麻煩了。所以我們可以事先把點(diǎn)擊后的樣式寫在一個(gè)類名中，點(diǎn)擊元素時(shí)直接更換它的class名即可。

通過css先寫好點(diǎn)擊后的效果：

        .active{   /*點(diǎn)擊后的樣式*/
            background: skyblue;
            width:200px;
        }

js代碼：

        var myLi = document.getElementsByTagName("li");  //獲取頁面中全部li
        for(var i=0;i<myLi.length;i++){  //依次給每個(gè)li設(shè)置點(diǎn)擊事件
            myLi[i].onclick = function(){
                this.className="active";  //更換class名為“active”
            }
        }

我們點(diǎn)擊第一個(gè)和第三個(gè)li試一試，結(jié)果如下圖所示，可以看到點(diǎn)擊后的li都被改變了樣式。如果不是要點(diǎn)擊，而是滑入的話，把onclick事件改為onmouseover事件就可以啦。