JS之实现选项卡和悬浮导航

// 首先用语言描述下来整体效果,在描述出来,最后码出来
// 获取ul下的每一个ul,并且给他们添加点击事件,事件判断给他们class

var tabs = document.getElementById("sul").getElementsByTagName("li");
var shops = document.getElementById("shops").getElementsByTagName("ul");

for(let i = 0; i < tabs.length;i++){
    tabs[i].onclick = ccli;
};


function ccli(){
    for(let i = 0; i < tabs.length;i++){
        if(tabs[i] === this){
            tabs[i].className = "active";
            shops[i].className = "clearfl active";
        }else{
            tabs[i].className = "";
            shops[i].className = "clearfl";
        }
    };

    
}


// 判断滚动条位置设置浮动
var scrolstop = document.getElementById("sul");
window.onscroll = function (){
    // 
    var s1 = document.documentElement.scrollTop;
    if(s1 >= 260){
        scrolstop.className = "scrolstop";
    }else{
        scrolstop.className = "";
    }

    console.log(s1);
}

//  各种状态css给设定好,js根据情况设置css状态
//  写给自己看的,路人甲看到了不要喷我,只有我自己能看懂
Last modification:June 27th, 2019 at 08:34 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment