window.onload = function() {//頁面加載完成后出發函數

? ? ? ? var oUl1 = document.getElementById("ul1");?? //獲取id為ul1的節點

? ? ? ? var aLi = oUl1.getElementsByTagName("li");?? //獲取id為ul1下的所有li節點

? ? ? ? var oDiv = document.getElementById("tab-list");?? //獲取id為tab-list的節點

? ? ? ? var aDiv = oDiv.getElementsByTagName("div");?? //獲取id為tab-list下的所有div節點

? ? ? ? for(var i = 0; i < aLi.length; i++) {?? //遍歷所有ul1下的li節點

? ? ? ? ? ? aLi[i].index = i;?? //保存aLi[i]的下標（因為當鼠標滑過ul1下的li節點時此li的下標和tab-list下的div節點的下標相同，方便以后調用?。?/p>

? ? ? ? ? ? aLi[i].onmouseover = function() {?? //當鼠標滑過ul1下的li節點時觸發函數

? ? ? ? ? ? ? ? for(var i = 0; i < aLi.length; i++) {? //遍歷所有ul1下的li節點

? ? ? ? ? ? ? ? ? ? aLi[i].className = "";? //刪除ul1下的li節點className

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? this.className = "active";? //設置鼠標滑過ul1下的改li節點的className為“active”（css樣式表提前設置好改active樣式?。?/p>

? ? ? ? ? ? ? ? for(var j = 0; j < aDiv.length; j++) {?? //遍歷id為tab-list下所有div節點

? ? ? ? ? ? ? ? ? ? aDiv[j].className = "hide";?? //id為tab-list下所有div節點的className設置為“hide”（即隱藏，在CSS樣式表中提前已經設置了 .hide{display:none;}）

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? aDiv[this.index].className = "show";?? //當鼠標滑過ul1下的li節點時和此li節點下標相同的div節點的className設置為show 即顯示，在CSS樣式表中提前已經設置了 .show{display:block;}

? ? ? ? ? ? } ? ? ? ?

? ? ? ? }

? ? }

希望采納我的回答，新手自學可能回答有錯誤的地方所以該回答僅供參考！

onmouseover事件觸發： for循環把3個li標簽的class屬性設為hide 然后把當前對象的class屬性設為show?

然后再style 標簽里把 .hide{ display:none; } 實現隱藏其他div標簽