<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>實踐題 - 選項卡</title> <style type="text/css"> *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} #tabs {width:290px;padding:5px;height:150px;margin:20px;} #tabs ul{ list-style:none;display: block;height:30px;line-height:30px; border-bottom:2px saddlebrown solid; } #tabs ul li{ background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px; margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none; display:inline-block;width:60px;text-align: center; } #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;} #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;} .hide{display: none;} </style> <script type="text/javascript"> window.onload = function(){ //獲取最外層div節點 var oTab = document.getElementById("tabs"); //獲取第一個ul節點 var oUl = oTab.getElementsByTagName("ul")[0]; //獲取ul節點中的所有li節點 var oLis = oUl.getElementsByTagName("li"); //獲取所有最外層div中的所有div節點 var oDivs= oTab.getElementsByTagName("div");其中的for循環語句不是很理解，代碼如下：for(var i= 0;i<oLis.length;i++){ oLis[i].index = i; //這一句代碼起什么作用？ oLis[i].onclick = function() { for(var n= 0;n<oLis.length;n++){ oLis[n].className = ""; oDivs[n].className = "hide"; } this.className = "on"; oDivs[this.index].className = ""; } };for循環中的代碼塊語句作用不是很理解，請大神指教。是點擊事件發生時將所有的li元素樣式設置為 非 on類樣式，所有的div元素設置為 hide類樣式嗎？然后再將點擊事件的當前對象li設置為on類樣式，當前對應索引的div樣式設置為非hide類樣式嗎？
下面的js代碼中for循環中的代碼塊不是很理解，求指教
白豬掌柜的
2019-03-14 14:15:25
