今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下！ 当然这是我用Jquery来封装的 页面可以调用多次 调用方式                new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写！下面的是我的HTML一些结构如下：

 

 
   
     
    
  1. <div id="tab1"> 
    2.  
    
  2.      <ul class="menu">  
    3.  
    
  3.          <li class="current">tab1</li>  
    4.  
    
  4.          <li>tab2</li>  
    5.  
    
  5.          <li>tab3</li>  
    6.  
    
  6.          <li class="last-col">tab4</li>  
    7.  
    
  7.      </ul>  
    8.  
    
  8.      <div class="content-main">  
    9.  
    
  9.          <div class="content">tab1</div>  
    10.  
    
  10.          <div class="content hide">tab2</div>  
    11.  
    
  11.          <div class="content hide">tab3</div>  
    12.  
    
  12.          <div class="content hide">tab4</div>  
    13.  
    
  13.      </div>  
    14.  
    
  14.  </div>  
    15.  
   
 
   
 
 
   
结构是这样的！下面是我页面上的HTML/CSS的代码！
 
   
 
 
   
 
   
     
    
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    2.  
    
  2.  <title>无标题文档</title>  
    3.  
    
  3.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
    4.  
    
  4.  <style>  
    5.  
    
  5. #tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}  
    6.  
    
  6. #tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}  
    7.  
    
  7. .menu{ width:196px; height:18px; margin:0; padding:0;}  
    8.  
    
  8. .menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}  
    9.  
    
  9. .menu li.current{ border-bottom:none;}  
    10.  
    
  10. .content-main{ width:196px; height:200px; overflow:hidden;}  
    11.  
    
  11. .content{ width:196px; height:200px; overflow:hidden; display:block;}  
    12.  
    
  12. .hide{ display:none;width:196px; height:200px; overflow:hidden;}  
    13.  
    
  13. .menu li.last-col{ border-right:none; width:49px;}  
    14.  
    
  14.  </style>  
    15.  
    
  15.  <script src="AutoTab.js"></script>  
    16.  
    
  16.  </head>  
    17.  
    
  17.  
    18.  
    
  18.  <body>  
    19.  
    
  19.  
    20.  
    
  20.  <div id="tab1">  
    21.  
    
  21.      <ul class="menu">  
    22.  
    
  22.          <li class="current">tab1</li>  
    23.  
    
  23.          <li>tab2</li>  
    24.  
    
  24.          <li>tab3</li>  
    25.  
    
  25.          <li class="last-col">tab4</li>  
    26.  
    
  26.      </ul>  
    27.  
    
  27.      <div class="content-main">  
    28.  
    
  28.          <div class="content">tab1</div>  
    29.  
    
  29.          <div class="hide">tab2</div>  
    30.  
    
  30.          <div class="hide">tab3</div>  
    31.  
    
  31.          <div class="hide">tab4</div>  
    32.  
    
  32.      </div>  
    33.  
    
  33.  </div>  
    34.  
    
  34.  <br /><br />  
    35.  
    
  35.  
    36.  
    
  36.  <div id="tab2">  
    37.  
    
  37.      <ul class="menu">  
    38.  
    
  38.          <li class="current">tab1</li>  
    39.  
    
  39.          <li>tab2</li>  
    40.  
    
  40.          <li>tab3</li>  
    41.  
    
  41.          <li class="last-col">tab4</li>  
    42.  
    
  42.      </ul>  
    43.  
    
  43.      <div class="content-main">  
    44.  
    
  44.          <div class="content">tab1</div>  
    45.  
    
  45.          <div class="hide">tab2</div>  
    46.  
    
  46.          <div class="hide">tab3</div>  
    47.  
    
  47.          <div class="hide">tab4</div>  
    48.  
    
  48.      </div>  
    49.  
    
  49.  </div>  
    50.  
    
  50.  <script>new tabSlider("#tab1",4);</script>  
    51.  
    
  51.  <script>new tabSlider("#tab2",4);</script>  
    52.  
    
  52.  </body>  
    53.  
    
  53.  </html>  
    54.  
   
 
   
JS代码如下：
 
   
 
 
   
 
   
     
    
  1. // JavaScript Document  
    2.  
    
  2.  
    3.  
    
  3.      /*  
    4.  
    
  4.     *@date 2011 10 24  
    5.  
    
  5.     *@ author tugenhua  
    6.  
    
  6.     *@ email tugenhua@126.com  
    7.  
    
  7.     *@ 可以一个页面多次引用  
    8.  
    
  8.     依赖的结构  
    9.  
    
  9.     <div id="tab1">  
    10.  
    
  10.     <ul class="menu">  
    11.  
    
  11.         <li class="current">tab1</li>  
    12.  
    
  12.         <li>tab2</li>  
    13.  
    
  13.         <li>tab3</li>  
    14.  
    
  14.         <li class="last-col">tab4</li>  
    15.  
    
  15.     </ul>  
    16.  
    
  16.     <div class="content-main">  
    17.  
    
  17.         <div class="content">tab1</div>  
    18.  
    
  18.         <div class="content hide">tab2</div>  
    19.  
    
  19.         <div class="content hide">tab3</div>  
    20.  
    
  20.         <div class="content hide">tab4</div>  
    21.  
    
  21.     </div>  
    22.  
    
  22. </div>  
    23.  
    
  23.  
    24.  
    
  24. ×页面引用的方式  
    25.  
    
  25.     new tabSlider("#tab1",4);  
    26.  
    
  26.     #tab1 是外部ID,4 指 一共有多少个li  
    27.  
    
  27. */ 
    28.  
    
  28.  
    29.  
    
  29.  function tabSlider(obj,count){   
    30.  
    
  30.      var _this = this;   
    31.  
    
  31.         _this.obj = obj;  
    32.  
    
  32.         _this.count = count;  
    33.  
    
  33.          _this.time = 2000;//停留的时间   
    34.  
    
  34.         _this.n = 0;  
    35.  
    
  35.          var  t;   
    36.  
    
  36.          this.slider = function(){   
    37.  
    
  37.              $(_this.obj + " .menu li").bind("mouseover",function(event){   
    38.  
    
  38.                  $(event.target).addClass("current").siblings().removeClass("current");   
    39.  
    
  39.                  var index = $(_this.obj + " .menu li").index(this);   
    40.  
    
  40.                  $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();   
    41.  
    
  41.                 _this.n = index;      
    42.  
    
  42.             })    
    43.  
    
  43.         }  
    44.  
    
  44.          this.addhover = function(){   
    45.  
    
  45.              $(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});    
    46.  
    
  46.         }  
    47.  
    
  47.          this.autoplay = function(){   
    48.  
    
  48.             _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;  
    49.  
    
  49.              $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");       
    50.  
    
  50.         }     
    51.  
    
  51.          this.factory = function(){   
    52.  
    
  52.              this.slider();   
    53.  
    
  53.              this.addhover();   
    54.  
    
  54.              t = setInterval(this.autoplay,_this.time);     
    55.  
    
  55.         }  
    56.  
    
  56.          this.factory();   
    57.  
    
  57. }  
    58.  
   
 
   
下面来说说下我封装这个js的思路，因为写任何程序 思路是最重要的，只要能想的清楚 代码就一定能实现掉！思路说的更好听的话 就是我们常说的“算法”！
 
   
1 function tabSlider(obj,count){} 用这个js来封装后传入参数！当在HTML页面上时直接调用 tabSlider(obj,count)就可以了！
 
   
2 初始化一些参数 然后给这个函数自生自定义一个函数 this.slider = function(){} 绑定个mouseover事件，初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示！其他的隐藏！
 
   
3 自定义this.addHover这个事件  当鼠标移上时候抽发这个事件！
 
   
4 自定义自动播放事件this.autoplay = function(){} 这个里面用了trigger这个触发方法 _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
    $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
 
   
5 最后用个函数 来渲染上面的函数 调用上面的函数
 
   
this.factory = function(){
    this.slider();
    this.addhover();
    t = setInterval(this.autoplay,_this.time); 
   }
   this.factory();