關于編程挑戰有些問題想請教一下各位大神。
?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";
? ? ? ? ? ? } ? ? ? ?
? ? ? ? }
? ? }
循環那一段不明白他是什么意思,它是怎樣達到鼠標移動切換三個頁面的
2016-07-20
??for(var?i?=?0;?i?<?aLi.length;?i++)?{?????//第一到第三個頁面 ????????????aLi[i].index?=?i;??????????????????//?取下每個頁面的頁面數 ????????????aLi[i].onmouseover?=?function()?{????????//?當前li標簽被點擊時 ????????????????for(var?i?=?0;?i?<?aLi.length;?i++)?{???????????//將所有的className設置為空字符串 ????????????????????aLi[i].className?=?""; ????????????????} ????????????????this.className?=?"active";?????????//??單獨當前頁面的className設置為active ????????????????for(var?j?=?0;?j?<?aDiv.length;?j++)?{ ????????????????????aDiv[j].className?=?"hide";???????//??所有的頁面className設置為?hide ????????????????}? ????????????????aDiv[this.index].className?=?"show";?????//??單獨將當前頁面設置為show ?????????????}???????? ????????} ???????//?其實?aLi[i].onmouseover?=?function()被調用的時候?for循環將3個li標簽的className設置為空?? ????????再單獨將當前頁面取出來設置它的this.className?=?"active",這樣你點擊了那個li標簽就有區別 ????????因為?active標簽的css樣式是不一樣的? ????????再??for(var?j?=?0;?j?<?aDiv.length;?j++)?這個for循環?也是將3個div標簽className設置為空 ????????循環出來?aDiv[this.index].className?=?"show";//單獨將當前頁面設置為show?這樣對應的頁面就顯示 ????????出來了,hide設置為隱藏?因為show不等于hide?是沒有樣式的??默認是顯示的。?以上是我的個人理解。2016-07-20
通過循環吧li的class屬性值設為"" ,當前的class設為"active";來實現的
2016-07-20
通過循環里面對aLi的classname的修改達到css樣式改變的效果 ,在循環中onmouseover事件里面同理。