                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

誰能詳細的和我解釋一下每句 JS實現選項卡切換的意思么

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";

? ? ? ? ? ? } ? ? ? ?

? ? ? ? }

? ? }

人源泰叁

2015-12-10

源自：JavaScript進階篇 10-1

關注問題我要回答

2250

操作

收起

2 回答

lynhao
2015-12-10

window.onload?=?function()?{//onload意思是說等靜態(tài)網頁加載后才執(zhí)行js代碼邏輯
????????var?oUl1?=?document.getElementById("ul1");?//getElementById是獲得標簽的id
????????var?aLi?=?oUl1.getElementsByTagName("li");//上面那個理解了，下面道理一樣，獲取name
????????var?oDiv?=?document.getElementById("tab-list");//以此類推
????????var?aDiv?=?oDiv.getElementsByTagName("div");//以此類推
????????for(var?i?=?0;?i?<?aLi.length;?i++)?{?//循環(huán)便利數組
????????????aLi[i].index?=?i;????
????????????aLi[i].onmouseover?=?function()?{?//鼠標滑過事件
????????????????for(var?i?=?0;?i?<?aLi.length;?i++)?{//循環(huán)便利數組
????????????????????aLi[i].className?=?"";???????//設置為空
????????????????}
????????????????this.className?=?"active";
????????????????for(var?j?=?0;?j?<?aDiv.length;?j++)?{
????????????????????aDiv[j].className?=?"hide";//隱藏
????????????????}
????????????????aDiv[this.index].className?=?"show";//顯示
????????????}????????
????????}
????}