您当前的位置：首页 > 前端技术 > JavaScript

Tab切换的五种方法

发布时间：2016-05-21 13:40:54 来源：技术改变生活！编辑：小黑 浏览量：

 通过Tab切换我们学到：函数，数组，for循环，if语句，this关键字。其中this关键字是最重要的，this关键字第一层含义就是指向当前对象。下面我就总结一下this关键字：



当点击第一和第三个li时候弹出来的是window对象，当点击第二个li时候弹出来的是html对象。这样我们就很清晰的理解this关键字到底是指向什么，this就是指向它的当前对象第一个和第三个的当前对象是li，第二个的当前对象是window。

下面来说一下5种方法吧！！

 

第一种方法：最笨的，代码量也是最多，但是是最容易理解的！主要代码如下：



它主要是写了三个function方法每一个方法对应一个li，通过点击li来调用每个方法。这种方法没什么好说的很好理解。

第二种方法是函数中有关键字，只需要建一个函数就可以，这种方法比上一种前进了一大步，有种进入了工业革命的感觉！代码如下：

 

 这个方法实现了一个函数可以解决问题，是跨进了一大步啊，这个方法没什么难得，主要是函数里面有了参数，通过参数来改变每次调用函数的不同意义。

第三种方法就是只传一个参数，这个方法只是第二种方法的改进，看一下代码吧！没什么可说的。



第四种方法：使用了for循环和关键字this，大量的减少了代码，提高了程序的复用，快要完美了，有种第二次工业革命哦！看看代码是如何的精简：



代码很简洁有木有啊！这个方法还是需要传参，不过调用函数的时候直接用this就可以了这个好像跨出了又一大步 啊。这个方法的精髓我感觉就在于this关键字和for循环的使用使程序的复用性大大地提高了，思想就是每次循环和传进的参数比较来改变实现的。

 

第五种方法：for循环，this关键字提升，使程序无限复用，是最完美的一版，有点进入共产主义了啊。



这种方法最大的亮点是你看不到li中调用函数了，其实在body中调用了，通过调用test函数来实现了每个li对changeTab的调用，但是只要当点击li的时候才会调用changeTab，changeTab函数中if语句中比较的对象直接就是this,这个this就是代表每个li，这也是开始先讲this关键字的原因，这种方法精髓在于随意复用，不用传参。

原文链接：http://blog.csdn.net/dong123dddd/article/details/8134841