Javascript 做Tab切换标签对于闭包的解决方法。

骚年继续努力！大家加油！

还是在做慕课网Javascript进阶篇最后的编程挑战时遇到的问题，大神轻喷~

原题地址：http://www.imooc.com/code/1912

基本结构是这样的，给title设置float:left;属性使其在并排显示。

HTML结构

步入正题，在HTML结构中能够看到，对于title和content我只设置第一个为show状态。

title的show相对于hide的区别是有不同的border-bottom
content的show相对于hide的区别是display:block和display:none

对于JS的想法是这样，获取title下的li标签，content下的div标签，然后用循环遍历所有的li标签，给每一个li添加onclick事件。

事件内用foer循环遍历所有content下的div使其className都为contentHide，在循环结束之后将被点击的tit对应索引找到第几个content下的div设置其className属性为contentShow。 于是我这样写了。

错误的JS代码

然后，运行无效果，只能出来第三个ocntent内容。
也就是这样写的话，每个点击事件最后都是i=2时的结果。

所以我们要想办法把当前点击的索引取出来并保存，在后面使用。

1.var一个index用来储存每次点击之后获取到的下标

2.在点击之后 this.index = i;

3.写一个show方法，将this.index作为参数传到此方法中

4.在show方法中首先 index = 传入的参数；

5.用for隐藏所有内容，contentList[index].className设置为show

OK完成 最后写出来是这样。

最终的正确JS代码

最重要的是用 this.index将当次的索引传出，这样就可以避免设置时都是循环结束时i的值。

本文作为学习笔记分享，如有错误请随意喷，转载请注明作者：我叫掏粪##

求喜欢+评论##