                        課程
                    
                        /前端開發
                        
                            /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";
??????????? }???????
??????? }
??? }
???這個index是索引的意思嗎? 怎么用的?? 還有就是代碼有點不懂

Ipython9

2017-05-08

源自：JavaScript進階篇 10-1

關注問題我要回答

927

操作

收起

1 回答

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

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

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