Chinaunix首页 | 论坛 | 博客

zhanfeng0102的ChinaUnix博客zhanfeng.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zhanfeng0102

  • 博客访问： 45152
  • 博文数量： 34
  • 博客积分： 831
  • 博客等级： 军士长
  • 技术积分： 310
  • 用 户 组： 普通用户
  • 注册时间： 2012-10-08 11:15
文章分类

全部博文（34）

文章存档

2012年（34）

我的朋友
最近访客
推荐博文
相关博文
Tab切换5种方法

分类： 系统运维

2012-10-08 16:35:02

 Tab切换的5种方法.rar   Tab切换5种方法

李老师用了三天的时间把Tab切换的效果讲给我们，感觉从中学到了很多很多，李老师的讲课一如既往的棒，从他身上学的的不仅仅是技术，更多的是思想。

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


点击(此处)折叠或打开

  1. 　　<script type="text/javascript">
  2. 　　        var lis;
  3. 　　        function test1()｛
  4. 　　Alert(this)
  5. 　　        }
  6. 　　        function test2(){
  7. 　　            lis=document.getElementsByTagName("li");
  8. 　　            for(var i=0;i<lis.length;i++){
  9. 　　                lis[i].onclick=test1;
  10. 　　            }
  11. 　　        }
  12. 　　    </script>
  13. 　　</head>
  14. 　　<body onload="test2()">
  15. 　　    <ul>
  16. 　　        <li class="sp"><a href="#">页面一</a></li>
  17. 　　        <li onclick="test1()"><a href="#">页面二</a></li>
  18. 　　        <li><a href="#">页面三</a></li>
  19. 　　    </ul>
  20. 　　</body>

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

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


点击(此处)折叠或打开

  1. <script type="text/javascript">
  2. function changeTab(a,b,c){
  3. var lia=document.getElementById("li"+a);
  4. var lib=document.getElementById("li"+b);
  5. var lic=document.getElementById("li"+c);
  6. var diva=document.getElementById("div"+a);
  7. var divb=document.getElementById("div"+b);
  8. var divc=document.getElementById("div"+c);
  9. lia.className="sp";
  10. lib.className="";
  11. lic.className="";
  12. diva.className="sp";
  13. divb.className="";
  14. divc.className="";
  15. }
  16. </script>
  17. <body>
  18. <ul>
  19. <li id="li1" class="sp" onclick="changeTab(1,2,3)"><a href="#">页面一</a></li>
  20. <li id="li2" onclick="changeTab(2,1,3)"><a href="#">页面二</a></li>
  21. <li id="li3" onclick="changeTab(3,1,2)"><a href="#">页面三</a></li>
  22. </ul>
  23. <div class="sp" id="div1">内容一</div>
  24. <div id="div2">内容二</div>
  25. <div id="div3">内容三</div>
  26. </body>

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

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


点击(此处)折叠或打开

  1. 　　<script type="text/javascript">
  2. 　　        function changeTab(a){
  3. 　　            var li1=document.getElementById("li1");
  4. 　　            var li2=document.getElementById("li2");
  5. 　　            var li3=document.getElementById("li3");
  6. 　　            var lia=document.getElementById("li"+a);
  7. 　　            var div1=document.getElementById("div1");
  8. 　　            var div2=document.getElementById("div2");
  9. 　　            var div3=document.getElementById("div3");
  10. 　　            var diva=document.getElementById("div"+a);
  11. 　　            li1.className="";
  12. 　　            li2.className="";
  13. 　　            li3.className="";
  14. 　　            lia.className="sp";
  15. 　　            div1.className="";
  16. 　　            div2.className="";
  17. 　　            div3.className="";
  18. 　　            diva.className="sp";
  19. 　　        }
  20. 　　    </script>
  21. 　　</head>
  22. 　　<body>
  23. 　　    <ul>
  24. 　　        <li id="li1" class="sp" onclick="changeTab(1)"><a href="#">页面一</a></li>
  25. 　　        <li id="li2" onclick="changeTab(2)"><a href="#">页面二</a></li>
  26. 　　        <li id="li3" onclick="changeTab(3)"><a href="#">页面三</a></li>
  27. 　　    </ul>
  28. 　　    
  29. 　　    <div class="sp" id="div1">内容一</div>
  30. 　　    <div id="div2">内容二</div>
  31. 　　    <div id="div3">内容三</div>
  32. 　　</body>

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


点击(此处)折叠或打开

  1. 　　script type="text/javascript">
  2. 　　        function changeTab(a){
  3. 　　            var lis=document.getElementsByTagName("li");
  4. 　　            var divs=document.getElementsByTagName("div");
  5. 　　            for(var i=0;i<lis.length;i++){
  6. 　　                if(lis[i]==a){
  7. 　　                    lis[i].className="sp";
  8. 　　                    divs[i].className="sp";
  9. 　　                }
  10. 　　                else{
  11. 　　                    lis[i].className="";
  12. 　　                    divs[i].className="";
  13. 　　                }
  14. 　　            }
  15. 　　        }
  16. 　　    </script>
  17. 　　</head>
  18. 　　<body>
  19. 　　    <ul>
  20. 　　        <li id="li1" class="sp" onclick="changeTab(this)"><a href="#">页面一</a></li>
  21. 　　        <li id="li2" onclick="changeTab(this)"><a href="#">页面二</a></li>
  22. 　　        <li id="li3" onclick="changeTab(this)"><a href="#">页面三</a></li>
  23. 　　    </ul>
  24. 　　    
  25. 　　    <div class="sp" id="div1">内容一</div>
  26. 　　    <div id="div2">内容二</div>
  27. 　　    <div id="div3">内容三</div>
  28. 　　</body>

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

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


点击(此处)折叠或打开

  1. <script type="text/javascript">
  2. var lis;
  3. function changeTab(){
  4. var divs=document.getElementsByTagName("div");
  5. for(var i=0;i<lis.length;i++){
  6. if(lis[i]==this){
  7. lis[i].className="sp";
  8. divs[i].className="sp";
  9. }
  10. else{
  11. lis[i].className="";
  12. divs[i].className="";
  13. }
  14. }
  15. }
  16. function test(){
  17. lis=document.getElementsByTagName("li");
  18. for(var i=0;i<lis.length;i++){
  19. lis[i].onclick=changeTab;
  20. }
  21. }
  22. </script>
  23. </head>
  24. <body onload="test()">
  25. <ul>
  26. <li class="sp"><a href="#">页面一</a></li>
  27. <li><a href="#">页面二</a></li>
  28. <li><a href="#">页面三</a></li>
  29. </ul>
  30. <div class="sp">内容一</div>
  31. <div>内容二</div>
  32. <div>内容三</div>
  33. </body>

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

阅读(470) | 评论(0) | 转发(0) |
0

上一篇：接触JS

下一篇：JS图片无缝滚动

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6