js案例1---选项卡制作

一、简单的选项卡制作

1.效果如下

• 点击选项卡几会出现相对应的页面。
  

2.核心代码

    for(var i=0;i<item.length;i++)
    {
        (function(n){
            //关联自定义属性
            item[n].index=n;
            item[n].onmouseenter=function(){
                if(save){
                    save.classList.remove("check");
                    child[save.index].style.display="none"
                }
                this.classList.add("check");
                //对应的底下出现对应的页面
                //console.log(i);//出现的全是5，所以要使用闭包，让它出来是1-5
                child[n].style.display="block";
                save=this;
            }
        })(i)
    } 

• 或者

    for(var i=0;i<item.length;i++)
    {
        item[i].index=i;
        item[i].οnmοuseenter=function(){
            if(save){
                save.classList.remove("check");
                child[save.index].style.display="none"
            }
            this.classList.add("check");
            //对应的底下出现对应的页面
            //console.log(i);//出现的全是5，所以要使用闭包，让它出来是1-5
            child[this.index].style.display="block";
            save=this;
        }
    } 

二、动画类的选项卡制作

1.效果

• 鼠标移动到上面选项卡的位置，底下的页面随之滑动到选项卡对应的页面。

2.核心代码

	for(var i=0;i<item.length;i++) {
        //关联自定义属性
        item[i].index = i;
        item[i].onmouseenter = function () {
            if (save) {
                save.classList.remove("check");
            }
            this.classList.add("check");
            save = this;
            itemlist.style.transform="translatex("+(-this.index*maxWidth)+"px)";
        }
    }