首页 > 代码库 > jQuery带有定时器的tab栏切换

jQuery带有定时器的tab栏切换

现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图:

新浪的tab栏切换

小强零零壹 http://www.xiaoqiang001.com

淘宝的tab栏切换

小强零零壹 http://www.xiaoqiang001.com

其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务器压力较大,而淘宝的是当鼠标放上去2秒左右,才切换,这样,防止不断的来回切换,这个效果我们需要带定时器来控制就好了。

小强老师今天就以淘宝的tab栏切换,利用jquery定时器来做这个效果。

首先先把html 结构书写如下:


                  <div class="r-hd">
                                     <div class="hd-tittle">        <--tab栏头部分-->
                                             <ul class="aa">
                                                     <li class="current"><a href="http://www.mamicode.com/#">公告</a></li>
                                                     <li><a href="http://www.mamicode.com/#">规则</a></li>
                                                     <li><a href="http://www.mamicode.com/#">论坛</a></li>
                                                     <li><a href="http://www.mamicode.com/#">安全</a></li>
                                                     <li><a href="http://www.mamicode.com/#">公益</a></li>
                                             
                                             </ul>
                                     </div>
                                     <div class=‘cc‘>     <--下面切换内容-->
                                     <ul class="hd-main" style="display:block">
                                              <li><a href="http://www.mamicode.com/#" class="hot">阿里全球招募梦想家1</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里通信17万人疯抢</a></li>
                                              <li><a href="http://www.mamicode.com/#">惊艳!新版魔盒初体验</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里案例工场开放入驻</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="http://www.mamicode.com/#" class="hot">阿里全球招募梦想家2</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里通信17万人疯抢</a></li>
                                              <li><a href="http://www.mamicode.com/#">惊艳!新版魔盒初体验</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里案例工场开放入驻</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="http://www.mamicode.com/#" class="hot">阿里全球招募梦想家3</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里通信17万人疯抢</a></li>
                                              <li><a href="http://www.mamicode.com/#">惊艳!新版魔盒初体验</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里案例工场开放入驻</a></li>
                                     </ul>
                                     <ul class="hd-main">
                                              <li><a href="http://www.mamicode.com/#" class="hot">阿里全球招募梦想家4</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里通信17万人疯抢</a></li>
                                              <li><a href="http://www.mamicode.com/#">惊艳!新版魔盒初体验</a></li>
                                              <li><a href="http://www.mamicode.com/#">阿里案例工场开放入驻</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="http://www.mamicode.com/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>

小强零零壹   与大家一起分享