window.onload = function() {//頁(yè)面加載完成后出發(fā)函數(shù)

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

? ? ? ? var aLi = oUl1.getElementsByTagName("li");?? //獲取id為ul1下的所有l(wèi)i節(jié)點(diǎn)

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

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

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

? ? ? ? ? ? aLi[i].index = i;?? //保存aLi[i]的下標(biāo)（因?yàn)楫?dāng)鼠標(biāo)滑過(guò)ul1下的li節(jié)點(diǎn)時(shí)此li的下標(biāo)和tab-list下的div節(jié)點(diǎn)的下標(biāo)相同，方便以后調(diào)用?。?/p>

? ? ? ? ? ? aLi[i].onmouseover = function() {?? //當(dāng)鼠標(biāo)滑過(guò)ul1下的li節(jié)點(diǎn)時(shí)觸發(fā)函數(shù)

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

? ? ? ? ? ? ? ? ? ? aLi[i].className = "";? //刪除ul1下的li節(jié)點(diǎn)className

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? this.className = "active";? //設(shè)置鼠標(biāo)滑過(guò)ul1下的改li節(jié)點(diǎn)的className為“active”（css樣式表提前設(shè)置好改active樣式?。?/p>

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

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

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? aDiv[this.index].className = "show";?? //當(dāng)鼠標(biāo)滑過(guò)ul1下的li節(jié)點(diǎn)時(shí)和此li節(jié)點(diǎn)下標(biāo)相同的div節(jié)點(diǎn)的className設(shè)置為show 即顯示，在CSS樣式表中提前已經(jīng)設(shè)置了 .show{display:block;}

? ? ? ? ? ? } ? ? ? ?

? ? ? ? }

? ? }

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

onmouseover事件觸發(fā)： for循環(huán)把3個(gè)li標(biāo)簽的class屬性設(shè)為hide 然后把當(dāng)前對(duì)象的class屬性設(shè)為show?

然后再style 標(biāo)簽里把 .hide{ display:none; } 實(shí)現(xiàn)隱藏其他div標(biāo)簽