原文：http://zhanfeng.blog.51cto.com/6109904/1017901
通过Tab切换我们学到：函数，数组，for循环，if语句，this关键字。其中this关键字是最重要的，this关键字第一层含义就是指向当前对象。下面我就总结一下this关键字：
<script type="text/javascript"> var lis; function test1()｛ Alert(this) } function test2(){ lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=test1; } } </script>
当点击第一和第三个li时候弹出来的是window对象，当点击第二个li时候弹出来的是html对象。这样我们就很清晰的理解this关键字到底是指向什么，this就是指向它的当前对象第一个和第三个的当前对象是li，第二个的当前对象是window。
下面来说一下5种方法吧！！
第一种方法：最笨的，代码量也是最多，但是是最容易理解的！主要代码如下：
<script type="text/javascript"> function changeTab1(){ var li1=document.getElementById("li1"); var li2=document.getElementById("li2"); var li3=document.getElementById("li3"); var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var div3=document.getElementById("div3"); li1.className="sp"; li2.className=""; li3.className=""; div1.className="sp"; div2.className=""; div3.className=""; } </script> <body> <ul> <li class="sp" id="li1" onclick="changeTab1()"><a href="#">页面一</a></li> <li id="li2" onclick="changeTab2()"><a href="#">页面二</a></li> <li id="li3" onclick="changeTab3()"><a href="#">页面三</a></li> </ul> <div class="sp" id="div1">内容一</div> <div id="div2">内容二</div> <div id="div3">内容三</div> </body>
它主要是写了三个function方法每一个方法对应一个li，通过点击li来调用每个方法。这种方法没什么好说的很好理解。
第二种方法是函数中有关键字，只需要建一个函数就可以，这种方法比上一种前进了一大步，有种进入了工业革命的感觉！代码如下：
<script type="text/javascript"> function changeTab(a,b,c){ var lia=document.getElementById("li"+a); var lib=document.getElementById("li"+b); var lic=document.getElementById("li"+c); var diva=document.getElementById("div"+a); var divb=document.getElementById("div"+b); var divc=document.getElementById("div"+c); lia.className="sp"; lib.className=""; lic.className=""; diva.className="sp"; divb.className=""; divc.className=""; } </script> <body> <ul> <li id="li1" class="sp" onclick="changeTab(1,2,3)"><a href="#">页面一</a></li> <li id="li2" onclick="changeTab(2,1,3)"><a href="#">页面二</a></li> <li id="li3" onclick="changeTab(3,1,2)"><a href="#">页面三</a></li> </ul> <div class="sp" id="div1">内容一</div> <div id="div2">内容二</div> <div id="div3">内容三</div> </body>
这个方法实现了一个函数可以解决问题，是跨进了一大步啊，这个方法没什么难得，主要是函数里面有了参数，通过参数来改变每次调用函数的不同意义。
第三种方法就是只传一个参数，这个方法只是第二种方法的改进，看一下代码吧！没什么可说的：
<script type="text/javascript"> function changeTab(a){ var li1=document.getElementById("li1"); var li2=document.getElementById("li2"); var li3=document.getElementById("li3"); var lia=document.getElementById("li"+a); var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var div3=document.getElementById("div3"); var diva=document.getElementById("div"+a); li1.className=""; li2.className=""; li3.className=""; lia.className="sp"; div1.className=""; div2.className=""; div3.className=""; diva.className="sp"; } </script> </head> <body> <ul> <li id="li1" class="sp" onclick="changeTab(1)"><a href="#">页面一</a></li> <li id="li2" onclick="changeTab(2)"><a href="#">页面二</a></li> <li id="li3" onclick="changeTab(3)"><a href="#">页面三</a></li> </ul> <div class="sp" id="div1">内容一</div> <div id="div2">内容二</div> <div id="div3">内容三</div> </body>
第四种方法：使用了for循环和关键字this，大量的减少了代码，提高了程序的复用，快要完美了，有种第二次工业革命哦！看看代码是如何的精简：
<script type="text/javascript"> function changeTab(a){ var lis=document.getElementsByTagName("li"); var divs=document.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ if(lis[i]==a){ lis[i].className="sp"; divs[i].className="sp"; } else{ lis[i].className=""; divs[i].className=""; } } } </script> </head> <body> <ul> <li id="li1" class="sp" onclick="changeTab(this)"><a href="#">页面一</a></li> <li id="li2" onclick="changeTab(this)"><a href="#">页面二</a></li> <li id="li3" onclick="changeTab(this)"><a href="#">页面三</a></li> </ul> <div class="sp" id="div1">内容一</div> <div id="div2">内容二</div> <div id="div3">内容三</div> </body>
代码很简洁有木有啊！这个方法还是需要传参，不过调用函数的时候直接用this就可以了这个好像跨出了又一大步 啊。这个方法的精髓我感觉就在于this关键字和for循环的使用使程序的复用性大大地提高了，思想就是每次循环和传进的参数比较来改变实现的。
第五种方法：for循环，this关键字提升，使程序无限复用，是最完美的一版，有点进入共产主义了啊。
<script type="text/javascript"> var lis; function changeTab(){ var divs=document.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ if(lis[i]==this){ lis[i].className="sp"; divs[i].className="sp"; } else{ lis[i].className=""; divs[i].className=""; } } } function test(){ lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=changeTab; } } </script> </head> <body onload="test()"> <ul> <li class="sp"><a href="#">页面一</a></li> <li><a href="#">页面二</a></li> <li><a href="#">页面三</a></li> </ul> <div class="sp">内容一</div> <div>内容二</div> <div>内容三</div> </body>
这种方法最大的亮点是你看不到li中调用函数了，其实在body中调用了，通过调用test函数来实现了每个li对changeTab的调用，但是只要当点击li的时候才会调用changeTab，changeTab函数中if语句中比较的对象直接就是this,这个this就是代表每个li，这也是开始先讲this关键字的原因，这种方法精髓在于随意复用，不用传参。