原文：http://zhanfeng.blog.51cto.com/6109904/1017901
李老师用了三天的时间把Tab切换的效果讲给我们，感觉从中学到了很多很多，李老师的讲课一如既往的棒，从他身上学的的不仅仅是技术，更多的是思想。
通过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></