                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

各位大佬，各位大佬，幫我解釋一下這幾句

window.onload = function() {

? ? ? ? var oUl1 = document.getElementById("ul1");

? ? ? ? var aLi = oUl1.getElementsByTagName("li");

? ? ? ? var oDiv = document.getElementById("tab-list");

? ? ? ? var aDiv = oDiv.getElementsByTagName("div");

? ? ? ? for(var i = 0; i < aLi.length; i++) {

? ? ? ? ? ? aLi[i].index = i;

? ? ? ? ? ? aLi[i].onmouseover = function() {

? ? ? ? ? ? ? ? for(var i = 0; i < aLi.length; i++) {

? ? ? ? ? ? ? ? ? ? aLi[i].className = "";

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? this.className = "active";

? ? ? ? ? ? ? ? for(var j = 0; j < aDiv.length; j++) {

? ? ? ? ? ? ? ? ? ? aDiv[j].className = "hide";

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? aDiv[this.index].className = "show";

? ? ? ? ? ? } ? ? ? ?

? ? ? ? }

? ? }

? ??

qq_臨摹不凡_0

2017-07-28

源自：JavaScript進(jìn)階篇 10-1

關(guān)注問(wèn)題我要回答

807

操作

收起

1 回答

ChildEden
2017-07-29

window.onload?=?function()?{
????????var?oUl1?=?document.getElementById("ul1");????????????????????????
????????var?aLi?=?oUl1.getElementsByTagName("li");????????????????????????//這一句和上一句是為了獲得三個(gè)標(biāo)題的標(biāo)簽??aLi是一個(gè)長(zhǎng)度為3的數(shù)組里面是
????????var?oDiv?=?document.getElementById("tab-list");
????????var?aDiv?=?oDiv.getElementsByTagName("div");??????????????????//這一句和上一句是為了獲得選項(xiàng)卡內(nèi)容所在的塊的標(biāo)簽???aDiv也是一個(gè)長(zhǎng)度為三的數(shù)組
????????for(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????aLi[i].index?=?i;????????????????????????????????????????????//以標(biāo)題為基礎(chǔ)??遍歷所有標(biāo)題?每個(gè)標(biāo)題給個(gè)序號(hào)index??作為后面div數(shù)組的下標(biāo)
????????????aLi[i].onmouseover?=?function()?{????????????????????????????//這里設(shè)置鼠標(biāo)在標(biāo)題上劃過(guò)的時(shí)候的事件
????????????????for(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????????????aLi[i].className?=?"";????????????????????????????????//這里把所有的標(biāo)題都改成沒(méi)被選中的時(shí)候的類???相當(dāng)于一種清空的作用??防止上次選中的在這次還被顯示
????????????????}
????????????????this.className?=?"active";????????????????????????????????//這句就單獨(dú)把選中的標(biāo)題改成選中狀態(tài)的類??這里的this是函數(shù)開(kāi)始的時(shí)候的aLi[i]
????????????????for(var?j?=?0;?j?<?aDiv.length;?j++)?{????????????????????//同上??先把所有內(nèi)容塊都先改成沒(méi)被選中狀態(tài)的類
????????????????????aDiv[j].className?=?"hide";????
????????????????}
????????????????aDiv[this.index].className?=?"show";??????????????????????//同上??單獨(dú)把選中的內(nèi)容塊改成選中狀態(tài)的類
????????????}????????
????????}
????}