原生js實現(xiàn)
怎么覺得老師寫的原生js效果里面的addClass和removeClass并沒有實現(xiàn)呢
慕粉3197089
2016-09-23
2 回答
舉報
0/150
提交
取消
2016-09-25
?function getByClassName(obj,cls){
? ? ? ? ? ? var elements=document.getElementsByTagName("*"); //把父元素下面所有的元素都獲取到
? ? ? ? ? ? var result=[];//返回的結(jié)果就是所有class=cla的數(shù)組
? ? ? ? ? ? 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(){
? ? ? ? ? ? //監(jiān)聽滾動條事件
? ? ? ? ? ? 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="";//獲取當(dāng)前滾動條所在樓層的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循環(huán)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(currentId){
? ? ? ? ? ? ? ? ? ? //給正確的menu下的a元素class賦值。
? ? ? ? ? ? ? ? ? ? for(var j=0;j<menus.length;j++){
? ? ? ? ? ? ? ? ? ? ? ? var _menu=menus[j];//獲取當(dāng)前的menu
? ? ? ? ? ? ? ? ? ? ? ? var ?_href=_menu.href.split("#");
? ? ? ? ? ? ? ? ? ? ? ? if(_href[_href.length-1]!=currentId){
? ? ? ? ? ? ? ? ? ? ? ? ? ?removeClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ?addClass(_menu,"current");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
2016-09-25
實現(xiàn)了，只是有些地方是有些問題的，我這有代碼，給你發(fā)