（写在文前的话：本文涉及到的编译软件为WebStorm，同类编译软件用法大同小异。JavaScript本文简称"JS"。）

tab选项卡的原理是点一下按钮或者超链接，会跳转到另一个模块去，即下图这种效果。

那我们先来理一下思路，首先需要3个按钮，和3个div；然后循环给每个按钮加点击事件；再然后循环给按钮和div清除样式；然后给按钮和div加点击之后的css样式；

布局布好了，接下来我们来给button加点击事件吧~

上面这段代码看上去没有问题，实际上是运行不出来的，因为选中行的变量i实际上是获取不到的；

因为在function函数里面，循环的时候不会执行带函数里面的代码（for循环的变量作用域问题）；那么要怎么让button和div是同步操作呢?接下来用两种办法给大家演示；

1.用自定义属性

实现了可以切换的效果，但是我们发现每一次点击后的样式并没有被清除，接下来清除一下点击后的样式

2.自执行函数

利用自执行函数就可以不用自定义个属性了。

ok，就到这里啦~ 喜欢的话给个心心支持一下吧  (๑╹╹)ﾉ""