我總是感覺這樣寫也是對的,為什么不對呢,哪位大神給我講講為什么?
? //定義getByClassName函數(shù),讓函數(shù)實現(xiàn)根據(jù)class name獲取對象并返回
? function getByClassName(obj,cls){
? ? ? var elements = obj.getElementsByTagName('*');
? ? ? var result=[];
? ? ? for(var i=0;i<elements.length;i++){
? ? ? ? ? if(elements[i].className == cls){
? ? ? ? ? ? ? result.push(elements[i]);
? ? ? ? ? }
? ? ? }
? ? ? return result;
? }
function hasClass( obj, cls ){?
? ?return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function removeClass( obj, cls ){?
? ?if( hasClass( obj, cls )){?
? ?//remove
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
obj.className = obj.className.replace(reg, "");
}
}
? ? //定義getByClassName函數(shù),讓函數(shù)實現(xiàn)給對象增加class?
? ? function addClassName( obj, cls ){
? ? ? ? if(!hasClass(obj,cls)){
? ? ? ? ? ? obj.className += " "+cls;
? ? ? ? }
? ? }
? ??
window.onload = function(){?
? ?window.onscroll = function(){
? ?var top = document.documentElement.scrollTop || document.body.scrollTop;
var menus = document.getElementById("menu").getElementsByTagName("a");
var items = getByClassName(document.getElementById("content"), "item");
var currentId = "";
for ( var i=0; i< items.length; i++ ){?
? ?var _item = items[i];
? ?var _itemTop = _item.offsetTop;
if( top > _itemTop - 200 ){?
? ?currentId = _item.id;
} else {?
? ?break;
}
}
? ? ? //請補充此處代碼,給正確的menu下的a元素class賦值current
? ? ? ? ? ? if(currentId){
? ? ? ? ? ? ? ? var _Link=getByClassName(document.getElementById("menu"),"current");
? ? ? ? ? ? ? ? var _href=_Link.getAttribute("href");
? ? ? ? ? ? ? ? var _menu=document.getElementById("menu");
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? if(_href!="#"+currentId){
? ? ? ? ? ? ? ? ? ? removeClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? //_menu.className("");
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? addClassName(_menu,"current");
? ? ? ? ? ? ? ? ? ?// _menu.className("current");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ??
}
}
2016-06-11
if(currentId){
? ? ? ? ? ? ? ? var _Link=getByClassName(document.getElementById("menu"),"current");
? ? ? ? ? ? ? ? var _href=_Link.getAttribute("href");
? ? ? ? ? ? ? ? var _menu=document.getElementById("menu");
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? if(_href!="#"+currentId){
? ? ? ? ? ? ? ? ? ? removeClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? //_menu.className("");
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? addClassName(_menu,"current");
? ? ? ? ? ? ? ? ? ?// _menu.className("current");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
這代碼好幾個漏洞,首先沒有循環(huán)遍歷導航menu中的a元素,你運行的時候只能執(zhí)行一次添加/刪除 current,然而你目前的代碼連執(zhí)行一次的能力都沒有,因為這里
var _Link=getByClassName(document.getElementById("menu"),"current");
var _href=_Link.getAttribute("href");
這里的_Link 是一個數(shù)組,雖然只有一個成員,var _href=_Link.getAttribute("href");應(yīng)該寫成
var _href=_Link[0].getAttribute("href");
但是即使你這里對了,后面也沒法加循環(huán)去實現(xiàn)導航滾動的時候隨時添加/刪除current, 因為你這里寫死了。
還是按照老師的來吧。。。
2016-05-19
最后那個地方你的for循環(huán)呢,需要循環(huán)判斷