简易真正的tab栏

1.效果：点击每个按钮，相应的盒子就会出现：

代码：

var btn = document.getElementsByTagName("button");

var lis = document.getElementsByTagName("li");

for(var i = 0;i<btn.length;i++){

btn[i].index = i;

btn[i].onclick = function(){

for(var i = 0;i<btn.length;i++){

btn[i].style.background = "";

}

for( var i = 0;i<lis.length;i++){

lis[i].style.display = "none";

 

}

lis[this.index].style.display = "block";

this.style.background = "pink";

}

}

注解：这里边用到了三个for循环。其中style.display也可以换成className添加有相同效果的类名即可。