jQuery帶有定時器的tab欄切換

如今網上不少相似選項卡的切換，咱們成爲tab欄切換，好比下圖：

新浪的tab欄切換



淘寶的tab欄切換



其中，新浪的tab欄鼠標放上去，能夠快速的來回切換，可是若是採起ajax異步傳輸，不停去加載服務器壓力較大，而淘寶的是當鼠標放上去2秒左右，才切換，這樣，防止不斷的來回切換，這個效果咱們須要帶定時器來控制就行了。

小強老師今天就以淘寶的tab欄切換，利用jquery定時器來作這個效果。

首先先把html 結構書寫以下：

                  <div class="r-hd">
                                     <div class="hd-tittle">        <--tab欄頭部分-->
                                             <ul class="aa">
                                                     <li class="current"><a href="#">公告</a></li>
                                                     <li><a href="#">規則</a></li>
                                                     <li><a href="#">論壇</a></li>
                                                     <li><a href="#">安全</a></li>
                                                     <li><a href="#">公益</a></li>
                                             
                                             </ul>
                                     </div>
                                     <div class='cc'>     <--下面切換內容-->
                                     <ul class="hd-main" style="display:block">
                                              <li><a href="#" class="hot">阿里全球招募夢想家1</a></li>
                                              <li><a href="#">阿里通訊17萬人瘋搶</a></li>
                                              <li><a href="#">驚豔！新版魔盒初體驗</a></li>
                                              <li><a href="#">阿里案例工場開放入駐</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="#" class="hot">阿里全球招募夢想家2</a></li>
                                              <li><a href="#">阿里通訊17萬人瘋搶</a></li>
                                              <li><a href="#">驚豔！新版魔盒初體驗</a></li>
                                              <li><a href="#">阿里案例工場開放入駐</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="#" class="hot">阿里全球招募夢想家3</a></li>
                                              <li><a href="#">阿里通訊17萬人瘋搶</a></li>
                                              <li><a href="#">驚豔！新版魔盒初體驗</a></li>
                                              <li><a href="#">阿里案例工場開放入駐</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="#" class="hot">阿里全球招募夢想家4</a></li>
                                              <li><a href="#">阿里通訊17萬人瘋搶</a></li>
                                              <li><a href="#">驚豔！新版魔盒初體驗</a></li>
                                              <li><a href="#">阿里案例工場開放入駐</a></li>
                                     </ul>
                                     </div>
                               </div>

接着書寫css部分

.r-hd{ height:98px; border:1px solid #eee; width:298px;} /*頭部的盒子*/
.hd-tittle{ height:27px; width:298px; position:relative; overflow:hidden;} /*ul的父盒子，寬度298px，相對定位能夠佔住上面的位子，不影響下面的盒子，同時能夠用定位流切ul這個定位流*/
.hd-tittle ul{ width:301px; position:absolute; left:-1px;} /*ul的寬度比父盒子大，絕對定位，能夠裝下五個li，不會換行    向左移動一像素，第一個li的左邊框就會壓在大盒子上*/
.hd-tittle li{ float:left; width:58px; height:26px; border-bottom:1px solid #eee; padding:0 1px; background-color:#f7f7f7; line-height:26px; text-align:center;}
.hd-tittle li.current{ background-color:#fff; border-bottom-color:#fff; border-right:1px solid #eee; border-left:1px solid #eee; padding:0; color:#3c3c3c; font-weight:bold;}
/*li裏面總寬60，當定義當前的時候沒有左右內邊距，換成了左右邊框*/
.hd-main{ margin:15px;}
.hd-main li{ float:left; width:130px;height:25px; margin-left:2px; }

最後是jquery 特效部分

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>   
<script type="text/javascript">
   $(document).ready(function() {
        $(".aa li").each(function(index, el) {              /*  遍歷全部的tab欄目  */
          $(this).mouseover(function(event) {
            dangqian=$(this);                                      //  獲取當前對象
            n=setTimeout(fun,500);                            //開啓定時器
            function fun(){
               dangqian.addClass('current').siblings().removeClass('current');    // 給鼠標當前的tab欄添加css樣式
                $(".cc ul").eq(index).show().siblings().hide();                               // 同時顯示與 當前tab欄相應的 下部份內部部分
            }
          }).mouseout(function(event) {
           clearTimeout(n);                                  // 移除定時器
          });
          
        });
       });
</script>

小強零零壹   與你們一塊兒分享