您当前的位置:首页 > 前端技术 > 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
上一篇:返回列表