原生js实现选项卡样式切换的几种方式。

• 先分享一个不能实现的实例(因为es5没有块作用域)

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

　　　　　　{

　　　　　　　　list[i].onclick = function(){

　　　　　　　　　　　　tabchange(i);

　　　　　　　　　　}

　　　　　　}

解决方案：

• 1.es6新的变量声明方式 let(es6具有块级作用域，解决es5存在的问题)

　

　　　　for(let i=0; i<list.length; i++ )

　　　　　　{

　　　　　　　　list[i].onclick = function(){

　　　　　　　　　　　　tabchange(i);

　　　　　　　　　　}

　　　　　　}

• 2.利用闭包

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

　　　　　　{

　　　　　　　　list[i].onclick = （function(){

　　　　　　　　　　　　return function(){

　　　　　　　　　　　　tabchange(i);

　　　　　　　　　　　　}

　　　　　　　　　　}）(i);

　　　　　　}

• 3.为元素对象创建对应的索引

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

　　　　　　{

　　　　　　　　list[i].myindex=i;

　　　　　　　　list[i].onclick = function(){

　　　　　　　　　　　　tabchange(this.myindex);//绑定元素对应的索引

　　　　　　　　　　}

　　　　　　}

• 这种方案一般也用于轮播图，当然是用框架就不用考虑这么多问题了