// 首先用语言描述下来整体效果，在描述出来，最后码出来
// 获取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状态
//  写给自己看的，路人甲看到了不要喷我，只有我自己能看懂