Jquery封裝tab自動切換效果的具體實作_jquery

今天我這邊網速真是太慢了，打開一個網頁要等很久，但是還是想寫篇文章----tab自動切換因為工作中經常會碰到這樣的問題所以寫博客也是總結下最重要的是能分享下及以後碰到類似的可以參考下！ 當然這是我可以用Jquery來封裝的頁面可以呼叫多次呼叫方式                new tabSlider(obj,count);obj指容器最外層ID,countcount指有多個lider想法來寫！下面的是我的HTML一些結構如下：

複製程式碼 程式碼如下:

程式碼如下:

   

       
• tab1

     tab3
       
• tab4

   

   

tab1

       

tab2

       

tab3

tab4

   

結構是這樣的！下面是我頁面上的HTML/CSS的程式碼！

複製程式碼

程式碼如下:

#tab1{ 寬度:196px;高度：220px；溢出：隱藏；邊框：1px 實心#666;}
#tab2{ 寬度：196px;高度：220px；溢位：隱藏；邊框：1px 實心#666;}
.menu{ 寬度：196px;高度：18px；保證金：0；填充：0;}
.menu li{ float:left;列表樣式：無；寬度：48px；文字對齊：居中；邊框底部： 1px實心#666；右邊框：1px 實心#666；遊標:指標;}
.menu li.current{ border-bottom:none;}
.content-main{ width:196px;高度：200px；溢出：隱藏；}
.content{ 寬度：196px;高度：200px；溢位：隱藏；顯示：區塊；}
.hide{ 顯示：無；寬度：196px；高度：200px；溢位：隱藏; }
.menu li.last-col{ border-right:none;寬度：49px;}

   

       
• tab1

       
• tab2< ;/li>
         
• tab3

       class="content-main">
       
tab1

       
tab2
class="hide">tab3

       

tab4

   

   

       
• 
    
• 
    
• 
     li>
         
• tab3

       
• tab4

   

 >
       

tab1

       

tab2

    

tab2

   🎜>       

tab4

   
   

<script>new tabSlider("#1🎜><BR><script>new tabSlider("#1 /script><BR><script>new tabSlider("#tab2",4 );</script>