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

js 實現(xià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";
??????????? }???????
??????? }
??? }
???這個index是索引的意思嗎? 怎么用的?? 還有就是代碼有點不懂

Ipython9

2017-05-08

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

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

920

操作

收起

1 回答

慕萊塢7434332 回答被采納 +3 積分
2017-05-09

window.onload?=?function()?{??????????????????????//網(wǎng)頁加載完執(zhí)行該函數(shù)
????????var?oUl1?=?document.getElementById("ul1");?//獲取id為ul1的元素存入oUl1
????????var?aLi?=?oUl1.getElementsByTagName("li");?//獲取oUl1中標(biāo)簽為li的元素
????????var?oDiv?=?document.getElementById("tab-list");//獲取id為tab-list的元素存入oDiv
????????var?aDiv?=?oDiv.getElementsByTagName("div");??//獲取oDIv中標(biāo)簽為div的元素
????????for(var?i?=?0;?i?<?aLi.length;?i++)?{????????//循環(huán)aLi
????????????aLi[i].index?=?i;????????????????????????//aLi的下標(biāo)賦值為i
????????????aLi[i].onmouseover?=?function()?{????????//滑動觸發(fā)函數(shù)
????????????????for(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????????????aLi[i].className?=?"";????????????//循環(huán)為aLi添加class
????????????????}
????????????????this.className?=?"active";?????????????//當(dāng)前對象的class名為active
????????????????for(var?j?=?0;?j?<?aDiv.length;?j++)?{
????????????????????aDiv[j].className?=?"hide";?????????//循環(huán)為aDiv添加類名為hide
????????????????}
????????????????aDiv[this.index].className?=?"show";???//aDiv的class=“show”
????????????}????????
????????}
????}

http://blog.csdn.net/kuangruike/article/details/50848585? ?這是對aLi[i].index = i;的解釋