现在网上很多类似选项卡的切换,我们成为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>

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

jQuery带有定时器的tab栏切换的更多相关文章

  1. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  2. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  3. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  4. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  5. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  6. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  7. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  8. tab栏切换,内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. MVC-03 控制器(5)

    八.动作过滤器 有时在运行Action之前或之后会需要运行一些逻辑运算,以及处理一些运行过程中所生成的异常状况,为了满足这个需求,ASP.NET MVC提供动作过滤器(Action Filter)来处 ...

  2. Qt的Model/View Framework解析(数据是从真正的“肉(raw)”里取得,Model提供肉,所以读写文件、操作数据库、网络通讯等一系列与数据打交道的工作就在model中做了)

    最近在看Qt的Model/View Framework,在网上搜了搜,好像中文的除了几篇翻译没有什么有价值的文章.E文的除了Qt的官方介绍,其它文章也很少.看到一个老外在blog中写道Model/Vi ...

  3. ddraw 视频下画图 不闪烁的方法

    我们如果是在在RGB视频上画图(直线,矩形等),一般采用双缓冲区继续,使用内存MemoryDC,来实现画的图形在视频上显示不闪烁的功能,但是我们知道用RGB显示视频都是使用GDI进行渲染,这样很耗CP ...

  4. 用Visual C++设计“精灵”窗体

    随着Microsoft凭借Windows在操作系统上取得的巨大成绩,Windows用户界面也日益成为业界标准.统一的界面给广大用户对应用软件的学习与使用带来了很大方便.但每天都面对同一副面孔,日久天长 ...

  5. weblogic的ejb远程调用

    这是一篇对EJB远程调用的简单范例.      1.环境:win7  + weblogic 12c + myeclipse8.5      2.目的:实现在myeclispe中对weblogic中EJ ...

  6. ccMacros

    #ifndef __CCMACROS_H__ #define __CCMACROS_H__ #ifndef _USE_MATH_DEFINES #define _USE_MATH_DEFINES #e ...

  7. linux下内存调试工具——valgrind

    1.valgrind之memcheck  最常用的工具,用来检测程序中出现的内存问题,所有对内存的读写都会被检测到,一切对malloc()/free()/new/delete的调用都会被捕获.所以,它 ...

  8. 在GridView控件里面绑定DropDownList控件

    参考链接: http://www.aspsnippets.com/Articles/Populate-DropDownList-with-Selected-Value-in-EditItemTempl ...

  9. NSArray的4种遍历方式

    前言:NSArray对应的是java的List,不同的是其元素不能更改,不过其派生类NSMutableArray可以更改,遍历的方式跟java的List基本一样 一.  for循环 Student * ...

  10. 解析ASP.NET Mvc开发之删除修改数据

    目录: 1)从明源动力到创新工场这一路走来 2)解析ASP.NET WebForm和Mvc开发的区别 3)解析ASP.NET Mvc开发之查询数据实例 4)解析ASP.NET Mvc开发之EF延迟加载 ...