(写在文前的话:本文涉及到的编译软件为WebStorm,同类编译软件用法大同小异。JavaScript本文简称"JS"。)
tab选项卡的原理是点一下按钮或者超链接,会跳转到另一个模块去,即下图这种效果。
那我们先来理一下思路,首先需要3个按钮,和3个div;然后循环给每个按钮加点击事件;再然后循环给按钮和div清除样式;然后给按钮和div加点击之后的css样式;
布局布好了,接下来我们来给button加点击事件吧~
上面这段代码看上去没有问题,实际上是运行不出来的,因为选中行的变量i实际上是获取不到的;
因为在function函数里面,循环的时候不会执行带函数里面的代码(for循环的变量作用域问题);那么要怎么让button和div是同步操作呢?接下来用两种办法给大家演示;
1.用自定义属性
实现了可以切换的效果,但是我们发现每一次点击后的样式并没有被清除,接下来清除一下点击后的样式
2.自执行函数
利用自执行函数就可以不用自定义个属性了。
ok,就到这里啦~ 喜欢的话给个心心支持一下吧 (๑╹╹)ノ""