还是在做慕课网Javascript进阶篇最后的编程挑战时遇到的问题,大神轻喷~
原题地址:http://www.imooc.com/code/1912
基本结构是这样的,给title设置float:left;属性使其在并排显示。
步入正题,在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。 于是我这样写了。
然后,运行无效果,只能出来第三个ocntent内容。
也就是这样写的话,每个点击事件最后都是i=2时的结果。
所以我们要想办法把当前点击的索引取出来并保存,在后面使用。
1.var一个index用来储存每次点击之后获取到的下标
2.在点击之后 this.index = i;
3.写一个show方法,将this.index作为参数传到此方法中
4.在show方法中首先 index = 传入的参数;
5.用for隐藏所有内容,contentList[index].className设置为show
OK完成 最后写出来是这样。
最重要的是用 this.index将当次的索引传出,这样就可以避免设置时都是循环结束时i的值。