思路：取得头部和内容的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. equals()和hashcode()

    默认调用的情况: 1.集合在存放对象时,首先判断hashcode(),再判断equals如果都是true,认为是相同的两个元素不进行存储. 删除对象时,将从hashcode指定位置查找再删除 2.在h ...

  2. Python学习（11）字典

    目录 Python 字典 访问字典中的值 修改字典 删除字典元素 字典键的特性 字典内置函数&方法 Python 字典(Dictionary) 字典是另一种可变容器模型,且可存储任意类型对象. ...

  3. keepalived的安装和使用

    IP配置 管理IP地址 角色 备注 网卡 192.168.1.114 主调度器(Director) 对外提供VIP服务的地址为192.168.1.88 eth1 192.168.1.205 备用调度器 ...

  4. Android 上千张图片的列表滑动加载

    一般项目中图片加载用的比较多的是ImageLoader 但是需求自己配置一些参数 上手有些复杂 对于手机图库中有上千张图片需要加载时 一个使用性能很好的库Glide可以解决 效果图如下 滑动非常流畅 ...

  5. hdu 4864 Task

    题目链接:hdu 4864 其实就是个贪心,只是当初我想的有偏差,贪心的思路不对,应该是这样子的: 因为 xi 的权值更重,所以优先按照 x 来排序,而这样的排序方式决定了在满足任务(即 xi > ...

  6. Bootstrap强调相关的类

    在Bootstrap中除了使用标签<strong>.<em>等说明正文某些字词.句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead” ...

  7. Linux下的split 命令（将一个大文件根据行数平均分成若干个小文件）

    将一个大文件分成若干个小文件方法 例如将一个BLM.txt文件分成前缀为 BLM_ 的1000个小文件,后缀为系数形式,且后缀为4位数字形式 先利用 wc -l BLM.txt       读出 BL ...

  8. 常用的MYSQL 命令

    例1:建立一个名为xhkdb的数据库   mysql> create database xhkdb; 例2:显示数据库 命令:show databases (注意:最后有个s)mysql> ...

  9. 在Android上使用Google V8 JS 引擎

    在cantk-runtime中直接使用的webview,通过JAVA扩展接口把Canvas的2d Context的API定向到JNI,通过OpenGL来图形加速,渲染速度大大提高.后来测试发现在大部分 ...

  10. python 练习 14

    方法一 #!/usr/bin/python # -*- coding: UTF-8 -*- def fib(n): a,b = 1,1 for i in range(n-1): a,b = b,a+b ...