今天用面向对象编程也写了一个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. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style> 
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
  9. .tabnav li.hover{background:#047} 
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;} 
  11. .tabbox div{margin:10px;line-height:20px} 
  12. .tabbox .hide{ display:none;} 
  13.  
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
  16. .tabnav2 li.hover{background:#047} 
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;} 
  18. .tabbox2 div{margin:10px;line-height:20px} 
  19. .tabbox2 .hide{ display:none;} 
  20. </style> 
  21. <script src="base.js"></script> 
  22. </head> 
  23.  
  24. <body> 
  25.     <ul class="tabnav"> 
  26.         <li class="list1">jQuery技术</li> 
  27.         <li class="list1">CSS技术</li> 
  28.         <li class="list1">xhtml技术</li> 
  29.     </ul> 
  30. <div class="tabbox"> 
  31.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
  32.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
  33.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
  34. </div> 
  35.  
  36. <script type="text/javascript" src="Tab.js"></script> 
  37. <script type="text/javascript"> 
  38.     var listMenu = getElementsByClassName("list1"); 
  39.     var contents = getElementsByClassName("c1"); 
  40.     var test = new Tab(listMenu,contents); 
  41.     test.Mouseover(); 
  42. </script> 
  43. </body> 
  44. </html> 

base.js是封装了一些基本的函数方法 原审javascript当然是没有这些方法的!

 


  1. function getElementsByClassName(className,context){ 
  2.         context = context || document; 
  3.         if(context.getElementsByClassName){ 
  4.             return context.getElementsByClassName(className);    
  5.         } 
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点 
  7.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点 
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]); 
  9.         }    
  10.         return ret; 
  11.     } 
  12.      
  13. //检查有没有类 
  14. function hasClass(node,className){ 
  15.     var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开    
  16.     //遍历这个类名 
  17.     for(var i=0;i<names.length;i++){ 
  18.         if(names[i]==className) 
  19.             return true;     
  20.         } 
  21.         return false;    
  22.     } 
  23.          
  24. /** 
  25. 参数说明 
  26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0 
  27. start : 开始值 
  28. dur : 动画持续多长时间 
  29. alter : 总的变化量 
  30. */ 
  31. function animate(o,start,alter,dur,fx){ 
  32.     var curTime=0; 
  33.     var t = setInterval(function(){ 
  34.         if(curTime>=dur) clearInterval(t); 
  35.         for(var i in start){ 
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   
  37.         } 
  38.         curTime+=50; 
  39.     },50)    
  40.     return function(){ 
  41.         clearInterval(t);    
  42.     }; 
  43.  
  44. function Linear(start,alter,curTime,dur){ 
  45.     return start + curTime/dur * alter;  
  46.     //最简单的线性变化 即匀速运动     
  47. //加速运动 
  48. function Quad(start,alter,curTime,dur){ 
  49.     return start + Math.pow(curTime/dur,2)*alter;    
  50.  function addClass(obj,className){   
  51.      obj.className+=" " +className;     
  52.      return obj;   
  53. function delClass(obj,className){   
  54.     var s = obj.className.split(/\s+/);//正则把类名分开   
  55.     for(var i=0;i<s.length;i++){   
  56.     if(s[i]==className){   
  57.     delete s[i];       
  58.     }      
  59.     }   
  60.     obj.className = s.join(" ");   
  61.     return obj;   
  62. }  

Tab.js代码如下:

 


  1. /** 
  2.  * @author tugenhua 
  3.  * version V1.0 
  4.  * Tab面向对象编程 
  5.  * 构造函数Tab传了三个参数 tabMenu指菜单li中的类 tabContent指对应中的内容类 currentClass指鼠标移上去的类 默认情况下为hover 
  6.  * 依赖于底层的base.js 此js封装一些javascript没有的方法 
  7.  * 此js封装了点击onclick和鼠标移上去onmouseover方法 恩在页面上js调用的方式如下 
  8.  * <script type="text/javascript"> 
  9.  *  var listMenu = getElementsByClassName("list1"); 
  10.  *  var contents = getElementsByClassName("c1"); 
  11.  *  var test = new Tab(listMenu,contents); 
  12.  *  test.Mouseover()或者test.Click();两种调用方式 
  13.  × 此js的缺点 就是Click和Mouseover两种方法函数有大量相同的代码 应该用个函数提取出来 直接调用哪个函数即可 目前只能这样吧 以后有空可以去 
  14.  × 做做! 
  15.  × 函数中用了javascript中的闭包解决参数的传递!注意页面中的this替换成了that 因为在闭包中的this并不是指针指向与当前的对象! 
  16.  *  </script> 
  17.  ×  
  18.  */ 
  19. function Tab(tabMenu, tabContent, currentClass, time){ 
  20.     this.tabMenu = tabMenu; 
  21.     this.tabContent = tabContent; 
  22.     this.currentClass = currentClass || "hover"
  23.     this.time = time || 3000; 
  24.     this.tabMenu[0].className +=" " +this.currentClass; 
  25.     } 
  26.     Tab.prototype = { 
  27.         Click : function(){ 
  28.             for(var j=0;j<this.tabMenu.length;j++){ 
  29.                 var that = this
  30.                 (function(_j){ 
  31.                     that.tabMenu[_j].onclick = function(){ 
  32.                         for(var c=0;c<that.tabContent.length;c++){ 
  33.                             that.tabContent[c].style.display = "none"
  34.                         } 
  35.                         that.clearClass(); 
  36.                         addClass(this,that.currentClass); 
  37.                         that.tabContent[_j].style.display = "block"
  38.                          
  39.                     } 
  40.                 })(j)    
  41.             } 
  42.         }, 
  43.         clearClass : function(){ 
  44.             for(var k=0;k<this.tabMenu.length;k++){ 
  45.                 if(hasClass(this.tabMenu[k],this.currentClass)){ 
  46.                     delClass(this.tabMenu[k],this.currentClass); 
  47.                 } 
  48.             } 
  49.         }, 
  50.         Mouseover : function(){ 
  51.             for(var j=0;j<this.tabMenu.length;j++){ 
  52.                 var that = this
  53.                 (function(_j){ 
  54.                     that.tabMenu[_j].onmouseover = function(){ 
  55.                         that.item = _j; 
  56.                         for(var c=0;c<that.tabContent.length;c++){ 
  57.                             that.tabContent[c].style.display = "none"
  58.                         } 
  59.                         that.clearClass(); 
  60.                         addClass(this,that.currentClass); 
  61.                         that.tabContent[_j].style.display = "block"
  62.                          
  63.                     } 
  64.                 })(j)    
  65.             } 
  66.         } 
  67.          
  68.     } 

Tab.js代码里面有相应的js注释 及 此js的优点和缺点!及js调用方法!有兴趣的同学可以看看!当然下面提供相应的下载 有不懂的地方可以留言!!