原生js实现
怎么觉得老师写的原生js效果里面的addClass和removeClass并没有实现呢
怎么觉得老师写的原生js效果里面的addClass和removeClass并没有实现呢
2016-09-23
function getByClassName(obj,cls){
var elements=document.getElementsByTagName("*"); //把父元素下面所有的元素都获取到
var result=[];//返回的结果就是所有class=cla的数组
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|$)"));//判断className里面是否包含我们传入的cls值
}
function removeClass(obj,cls){
if(hasClass(obj,cls)){
//remove
var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
obj.className=obj.className.replace(reg,"");//把包含这个class的字符串替换成空
}
}
function addClass(obj,cls){
if(!hasClass(obj,cls)){
obj.className+=" "+cls;
}
}
//页面载入之后
window.onload=function(){
//监听滚动条事件
window.onscroll=function(){
//获取滚动条top值。
var top=document.documentElement.scrollTop||document.body.scrollTop;
var menus=document.getElementById("menu").getElementsByTagName("a");
var items=getByClassName(document.getElementById("content"),"item");
var currentId="";//获取当前滚动条所在楼层的Id
for(var i=0;i<items.length;i++){
var _item=items[i];
var _itemTop=_item.offsetTop;
console.log(_item.offsetTop);
if(top>_itemTop-200){
currentId=_item.id;
}else{
break;//跳出for循环
}
}
if(currentId){
//给正确的menu下的a元素class赋值。
for(var j=0;j<menus.length;j++){
var _menu=menus[j];//获取当前的menu
var _href=_menu.href.split("#");
if(_href[_href.length-1]!=currentId){
removeClass(_menu,"current");
}else{
addClass(_menu,"current");
}
}
}
}
}
举报