思路：取得头部和内容的div，头部当前点击的高亮，其余的去除高亮，并通过index（）方法获得当前点击的索引，然后内容div通过.eq(index)显示和隐藏

优化：当前做法，从第一个快速移到最后一个，中间每个内容都会相继显示出来。比较好的用户体验是，从某个标签迅速移到另一个标签，中间不想看的内容不显示出来。这就需要延迟切换效果（每次划每次加载信息，必将影响性能）

使用定时器：setTimeout（500毫秒），每次鼠标滑过的时候，先判断定时器存不存在，存在的话先清除定时器，然后开启定时器，执行切换语句

要注意的是开启定时器，执行切换语句的时候，不能用$(this)，因为这时this指向的是定时器，应该在鼠标滑过的时候先把$(this)保存为一个变量，后面定时器开启时，再用这个变量代进去

[Jquery]tab页面切换效果的更多相关文章

  1. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  2. HTML5+jquery整屏页面切换效果

    压缩包下载 演示地址 http://www.yyyweb.com/demo/page-transitions/

  3. html tab页面切换事件。

    $(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...

  4. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  5. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  6. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  7. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  8. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  9. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

随机推荐

  1. DBCP、C3P0、Proxool 、 BoneCP开源连接池的比《转》

     简介   使用评价  项目主页  DBCP DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池.DBCP可以直接的在应用程序用使用 可以设置最大和最小连接,连接等待时 ...

  2. MySQL DATE_ADD() 函数

    用途: 在MySql语句执行日期的加减 实际情况: 常用于加减一段时间和当前时间比较的情况 函数如下: #date 指定的时间值 #INTERVAL #expr 添加的时间间隔 # 时间间隔单位 DA ...

  3. spring构造函数注入、setter方法注入和接口注入

    Spring开发指南中所说的三种注入方式: Type1 接口注入 我们常常借助接口来将调用者与实现者分离.如: public class ClassA { private InterfaceB clz ...

  4. 排序算法 & 迷宫的深度, 广度优先

    内容提要 1. 我掌握的排序算法的时间复杂度 2. 我掌握的6种排序算法(插入, 冒泡, 选择, 归并, 快速, 希尔) 3. 迷宫的搜索方法(深度优先 + 广度优先) 各种排序的时间复杂度 名称 稳 ...

  5. system v和posix的共享内存对比 & 共享内存位置

    参考 http://www.startos.com/linux/tips/2011012822078.html 1)Linux和所有的UNIX操作系统都允许通过共享内存在应用程序之间共享存储空间. 2 ...

  6. jquery定位

    1.$("div").offset().left ; div到文档的左距离(offset() 方法返回或设置匹配元素相对于文档的偏移) $("div").off ...

  7. Tomcat：配置虚拟目录或主目录

    为了在访问web服务的时候,不需要输入项目名,直接"/"就可以访问的话,需要设置虚拟目录或在ROOT下直接放项目 1.采用虚拟目录的方式 在Host中添加  <Context ...

  8. JPA基础

    目录 目录 1 一.JPA基础 2 1.1 JPA基础 2 1.2JPA开发过程 3 1.3 实体的生命周期及实体管理器常用方法 4 二.环境搭建 5 2.1 添加JPA支持 6 2.2 添加配置文件 ...

  9. zookeeper错误

    ZooKeeper JMX enabled by defaultUsing config: /data4/hadoop/zookeeper-3.4.8/bin/../conf/zoo.cfgError ...

  10. 百度编辑器 无法获取post过去的值

    如果你的,表单form是套用 table的话,请一下,要把 form 放在table的最外面.否则获取不到post值