为了账号安全,请及时绑定邮箱和手机立即绑定

原生js实现

怎么觉得老师写的原生js效果里面的addClass和removeClass并没有实现呢

正在回答

2 回答

 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");

                        }

                    }

                }

            }

        }


0 回复 有任何疑惑可以回复我~

实现了,只是有些地方是有些问题的,我这有代码,给你发

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

原生js实现

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信