自学前端不久，记录遇到的问题和解决方案-------作者按
选项卡是一个非常常见的组件，也相对简单，下面记录了我遇到的一些问题和总结反思。
目标是最普通的选项卡，上面有三个按钮，点击按钮在下方内容区分别显示不同内容。
html和css实现：
方法一：将三张图片从上到下堆放，将内容区设置为overflow：hidden，获取内容的top值，通过改变top值来显示不同图片。
方法二：方法一的实现方式有违选项卡的含义，因此在方法二中选择让图片们进行绝对定位，相互层叠，设置display：none，opacity：0，当选项被激活，设置active类为display：block，opacity：1，z-index：3。
到这里位置基本实现功能，考虑到组件化对命名的要求，参考 puerh的命名规则重新命名，如下：
使用类名选择器对样式进行设置，如下所示（部分）：
下面进行js部分的书写：
作为前端菜鸟刚开始选择了最菜鸟的写法，将每个按钮的事件分别添加，如下：
写完这部分丑陋的js就可以看到功能完整的选项卡了：
下面就要进入本文的重点，js组件化
作为一个菜鸟看到上面的成果还是有点高兴，但仔细一想，发现这是一个不能重用的“组件”，主要问题出在哪里呢？就是js，目前的js操作只针对当前这唯一一个tab，假如我复制一个tab，完全不能实现同样的功能。此外上图所示的js代码冗长多余，应该使用循环嵌套的方式，如下：
结果运行出错，Uncaught TypeError: Cannot set property 'className' of undefined，仔细查看了几遍代码发现是作用域的问题，事件里面的函数将会在for循环完成后才会被触发，因此导致这时的i已经变成了lists.length。
解决方案：在外面包一个函数，如下：
复制一份tab，运行，大功告成：
上述解决方案使用了两层闭包，可以改写成下面这样，结构比较清晰
当然如果采用Jquery这个组件就非常简单了，三行代码就ok
后记：虽然是个非常简单地组件，可能做得也不完善，但收获不少，特此记录。
网友评论