思路：取得头部和内容的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. 阿里商业评论 | 互联网POI数据及其在营销中的应用

    阿里商业评论 | 互联网POI数据及其在营销中的应用 时间 2014-11-05 10:40:50  阿里研究院 原文  http://www.aliresearch.com/index.php?m- ...

  2. springmvc企业级开发实战

    一.用eclipse插件搭建项目 二.pom文件 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...

  3. mysql 并发控制

    1.多个线程同时修改数据,存在数据不一致的情况,也就是并发控制的问题.2.mysql提供读锁和写锁,读锁之上可以再加读锁,不能加写锁,而写锁之上不能加任何锁.也就是说,读锁是共享的,写锁是排他的.3. ...

  4. gcc常用指令及相关知识

    1,gcc与g++的问题: 1.后缀为.c的,gcc把它当作是C程序,而g++当作是c++程序:后缀为.cpp的,两者都会认为是c++程序. 2.编译阶段,g++会调用gcc,对于c++代码,两者是等 ...

  5. SVN标准目录结构

    Trunk 这是SVN目录的主分支,表示日常开发中的项目,任何时候Trunk里包含的都是最新的开发代码. 这里的代码将会工作到你的下一个主要发布版本. Trunk应该只被用来开发将会成为你的下一个重要 ...

  6. tinyXml直接解析XML字符串

    一直都用tinyxml直接LoadFile来解析XML,发现原来也可以直接解析XML字符串. XML文件: <?xml version=\"1.0\" encoding=\& ...

  7. 数据存储之SQLite

    SQLite是目前主流的嵌入式关系型数据库,其最主要的特点就是轻量级.跨平台,当前很多嵌入式操作系统都将其作为数据库首选.虽然SQLite是一款轻型数据库,但是其功能也绝不亚于很多大型关系数据库.学习 ...

  8. 基于SpringBoot项目的https

    在spring中配置项目运行的端口很简单. 在application.properties中 server.port: 这样配置后,spring boot内嵌的tomcat服务器就是跑在8080端口启 ...

  9. 动画Animation

    动画分类:Animation 单一动画 AnimationSet 复合动画 AnimationSet是Animation的实现子类,Animation是一个抽象类,他的实现子类主要有如下几种: 主要有 ...

  10. for( unsigned int i=heapSize/2-1; i>=0; --i)

    unsigned int的表示 今天在写堆排序的时候遇到一个BUG void builMaxHeap( int *arr,unsigned int heapSize){ unsigned int i; ...