JS切換類並顯示相應的內容模塊

思路：一層循環遍歷操作的元素並獲取當前遍歷到的元素的下標，通過下標去選擇顯示對應的內容模塊。

二層循環將元素恢復操作前的狀態。

<!--- JS -->

var fbUls =document.getElementById("oUl");
var fbLis = fbUls.getElementsByTagName("li");
var aDivs = document.getElementsByClassName("theDiv");
for(var i = 0,val=fbLis.length;i<val;i++){
    fbLis[i].index = i; //存放當前元素的下標
    fbLis[i].onclick = function(){
        for(var j=0; j< fbLis.length; j++){
            fbLis[j].className="";
            aDivs[j].style.display = "none";
        }
        //給當前點擊的元素添加活躍標記
        this.className="liactive";
        //顯示對應的模塊內容
        aDivs[this.index].style.display = "block";
    };
}

<!-- HTML -->

<div>
    <ul id="oUl">
        <li class="liactive">首頁</li>
        <li>產品</li>
        <li>合作</li>
    </ul>
</div>
<div class="theDiv" id="oDiv1" style="display:block;">首頁模塊內容：這是首頁</div>
<div class="theDiv" id="oDiv2">產品模塊內容：這是產品</div>
<div class="theDiv" id="oDiv3">合作模塊內容：這是合作</div>

<!-- 效果 -->