今天用面向对象编程也写了一个tab切换组件！构造函数模式和原型模式封装了一个！本来写个这样的非常简单 但是在写过程中碰到一个问题想了一些时间 就是切换后类怎么加上去的问题！用了下时间去想 这个tab组件不支持自动切换  只支持 要那个直接调用就可以了，代码里面有调用的注释代码！HTMl代码如下：

 

 
    
     
         
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
         
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
         
  5. <title>无标题文档</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
    8.  
         
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
    9.  
         
  9. .tabnav li.hover{background:#047} 
    10.  
         
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;} 
    11.  
         
  11. .tabbox div{margin:10px;line-height:20px} 
    12.  
         
  12. .tabbox .hide{ display:none;} 
    13.  
         
  13.  
    14.  
         
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
    15.  
         
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
    16.  
         
  16. .tabnav2 li.hover{background:#047} 
    17.  
         
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;} 
    18.  
         
  18. .tabbox2 div{margin:10px;line-height:20px} 
    19.  
         
  19. .tabbox2 .hide{ display:none;} 
    20.  
         
  20. </style> 
    21.  
         
  21. <script src="base.js"></script> 
    22.  
         
  22. </head> 
    23.  
         
  23.  
    24.  
         
  24. <body> 
    25.  
         
  25.     <ul class="tabnav"> 
    26.  
         
  26.         <li class="list1">jQuery技术</li> 
    27.  
         
  27.         <li class="list1">CSS技术</li> 
    28.  
         
  28.         <li class="list1">xhtml技术</li> 
    29.  
         
  29.     </ul> 
    30.  
         
  30. <div class="tabbox"> 
    31.  
         
  31.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    32.  
         
  32.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    33.  
         
  33.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    34.  
         
  34. </div> 
    35.  
         
  35.  
    36.  
         
  36. <script type="text/javascript" src="Tab.js"></script> 
    37.  
         
  37. <script type="text/javascript"> 
    38.  
         
  38.     var listMenu = getElementsByClassName("list1"); 
    39.  
         
  39.     var contents = getElementsByClassName("c1"); 
    40.  
         
  40.     var test = new Tab(listMenu,contents); 
    41.  
         
  41.     test.Mouseover(); 
    42.  
         
  42. </script> 
    43.  
         
  43. </body> 
    44.  
         
  44. </html> 
    45.  
        
 
    
base.js是封装了一些基本的函数方法 原审javascript当然是没有这些方法的！
 
    
 
 
    
 
    
     
         
  1. function getElementsByClassName(className,context){ 
    2.  
         
  2.         context = context || document; 
    3.  
         
  3.         if(context.getElementsByClassName){ 
    4.  
         
  4.             return context.getElementsByClassName(className);    
    5.  
         
  5.         } 
    6.  
         
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点 
    7.  
         
  7.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点 
    8.  
         
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]); 
    9.  
         
  9.         }    
    10.  
         
  10.         return ret; 
    11.  
         
  11.     } 
    12.  
         
  12.      
    13.  
         
  13. //检查有没有类 
    14.  
         
  14. function hasClass(node,className){ 
    15.  
         
  15.     var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开    
    16.  
         
  16.     //遍历这个类名 
    17.  
         
  17.     for(var i=0;i<names.length;i++){ 
    18.  
         
  18.         if(names[i]==className) 
    19.  
         
  19.             return true;     
    20.  
         
  20.         } 
    21.  
         
  21.         return false;    
    22.  
         
  22.     } 
    23.  
         
  23.          
    24.  
         
  24. /** 
    25.  
         
  25. 参数说明 
    26.  
         
  26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0 
    27.  
         
  27. start : 开始值 
    28.  
         
  28. dur : 动画持续多长时间 
    29.  
         
  29. alter : 总的变化量 
    30.  
         
  30. */ 
    31.  
         
  31. function animate(o,start,alter,dur,fx){ 
    32.  
         
  32.     var curTime=0; 
    33.  
         
  33.     var t = setInterval(function(){ 
    34.  
         
  34.         if(curTime>=dur) clearInterval(t); 
    35.  
         
  35.         for(var i in start){ 
    36.  
         
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   
    37.  
         
  37.         } 
    38.  
         
  38.         curTime+=50; 
    39.  
         
  39.     },50)    
    40.  
         
  40.     return function(){ 
    41.  
         
  41.         clearInterval(t);    
    42.  
         
  42.     }; 
    43.  
         
  43. } 
    44.  
         
  44.  
    45.  
         
  45. function Linear(start,alter,curTime,dur){ 
    46.  
         
  46.     return start + curTime/dur * alter;  
    47.  
         
  47.     //最简单的线性变化 即匀速运动     
    48.  
         
  48. } 
    49.  
         
  49. //加速运动 
    50.  
         
  50. function Quad(start,alter,curTime,dur){ 
    51.  
         
  51.     return start + Math.pow(curTime/dur,2)*alter;    
    52.  
         
  52. } 
    53.  
         
  53.  function addClass(obj,className){   
    54.  
         
  54.      obj.className+=" " +className;     
    55.  
         
  55.      return obj;   
    56.  
         
  56. } 
    57.  
         
  57. function delClass(obj,className){   
    58.  
         
  58.     var s = obj.className.split(/\s+/);//正则把类名分开   
    59.  
         
  59.     for(var i=0;i<s.length;i++){   
    60.  
         
  60.     if(s[i]==className){   
    61.  
         
  61.     delete s[i];       
    62.  
         
  62.     }      
    63.  
         
  63.     }   
    64.  
         
  64.     obj.className = s.join(" ");   
    65.  
         
  65.     return obj;   
    66.  
         
  66. }  
    67.  
        
 
    
Tab.js代码如下：
 
    
 
 
    
 
    
     
         
  1. /** 
    2.  
         
  2.  * @author tugenhua 
    3.  
         
  3.  * version V1.0 
    4.  
         
  4.  * Tab面向对象编程 
    5.  
         
  5.  * 构造函数Tab传了三个参数 tabMenu指菜单li中的类 tabContent指对应中的内容类 currentClass指鼠标移上去的类 默认情况下为hover 
    6.  
         
  6.  * 依赖于底层的base.js 此js封装一些javascript没有的方法 
    7.  
         
  7.  * 此js封装了点击onclick和鼠标移上去onmouseover方法 恩在页面上js调用的方式如下 
    8.  
         
  8.  * <script type="text/javascript"> 
    9.  
         
  9.  *  var listMenu = getElementsByClassName("list1"); 
    10.  
         
  10.  *  var contents = getElementsByClassName("c1"); 
    11.  
         
  11.  *  var test = new Tab(listMenu,contents); 
    12.  
         
  12.  *  test.Mouseover()或者test.Click();两种调用方式 
    13.  
         
  13.  × 此js的缺点 就是Click和Mouseover两种方法函数有大量相同的代码 应该用个函数提取出来 直接调用哪个函数即可 目前只能这样吧 以后有空可以去 
    14.  
         
  14.  × 做做！ 
    15.  
         
  15.  × 函数中用了javascript中的闭包解决参数的传递!注意页面中的this替换成了that 因为在闭包中的this并不是指针指向与当前的对象! 
    16.  
         
  16.  *  </script> 
    17.  
         
  17.  ×  
    18.  
         
  18.  */ 
    19.  
         
  19. function Tab(tabMenu, tabContent, currentClass, time){ 
    20.  
         
  20.     this.tabMenu = tabMenu; 
    21.  
         
  21.     this.tabContent = tabContent; 
    22.  
         
  22.     this.currentClass = currentClass || "hover"; 
    23.  
         
  23.     this.time = time || 3000; 
    24.  
         
  24.     this.tabMenu[0].className +=" " +this.currentClass; 
    25.  
         
  25.     } 
    26.  
         
  26.     Tab.prototype = { 
    27.  
         
  27.         Click : function(){ 
    28.  
         
  28.             for(var j=0;j<this.tabMenu.length;j++){ 
    29.  
         
  29.                 var that = this; 
    30.  
         
  30.                 (function(_j){ 
    31.  
         
  31.                     that.tabMenu[_j].onclick = function(){ 
    32.  
         
  32.                         for(var c=0;c<that.tabContent.length;c++){ 
    33.  
         
  33.                             that.tabContent[c].style.display = "none"; 
    34.  
         
  34.                         } 
    35.  
         
  35.                         that.clearClass(); 
    36.  
         
  36.                         addClass(this,that.currentClass); 
    37.  
         
  37.                         that.tabContent[_j].style.display = "block"; 
    38.  
         
  38.                          
    39.  
         
  39.                     } 
    40.  
         
  40.                 })(j)    
    41.  
         
  41.             } 
    42.  
         
  42.         }, 
    43.  
         
  43.         clearClass : function(){ 
    44.  
         
  44.             for(var k=0;k<this.tabMenu.length;k++){ 
    45.  
         
  45.                 if(hasClass(this.tabMenu[k],this.currentClass)){ 
    46.  
         
  46.                     delClass(this.tabMenu[k],this.currentClass); 
    47.  
         
  47.                 } 
    48.  
         
  48.             } 
    49.  
         
  49.         }, 
    50.  
         
  50.         Mouseover : function(){ 
    51.  
         
  51.             for(var j=0;j<this.tabMenu.length;j++){ 
    52.  
         
  52.                 var that = this; 
    53.  
         
  53.                 (function(_j){ 
    54.  
         
  54.                     that.tabMenu[_j].onmouseover = function(){ 
    55.  
         
  55.                         that.item = _j; 
    56.  
         
  56.                         for(var c=0;c<that.tabContent.length;c++){ 
    57.  
         
  57.                             that.tabContent[c].style.display = "none"; 
    58.  
         
  58.                         } 
    59.  
         
  59.                         that.clearClass(); 
    60.  
         
  60.                         addClass(this,that.currentClass); 
    61.  
         
  61.                         that.tabContent[_j].style.display = "block"; 
    62.  
         
  62.                          
    63.  
         
  63.                     } 
    64.  
         
  64.                 })(j)    
    65.  
         
  65.             } 
    66.  
         
  66.         } 
    67.  
         
  67.          
    68.  
         
  68.     } 
    69.  
        
 
    
Tab.js代码里面有相应的js注释 及 此js的优点和缺点！及js调用方法！有兴趣的同学可以看看！当然下面提供相应的下载 有不懂的地方可以留言！！