思路：取得头部和内容的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. CSS规范之BFC & IFC

    元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div>和<span& ...

  2. 使用otl，报错：mysql Commands out of sync; you can't run this command now

    1.代码如下: void TestCache(otl_connect& otlConn) { try { ] = {}; sprintf(sql,"call test1(1)&quo ...

  3. iOS 开发之 Xcode6 打包生成ipa给测试

    Xcode 6正式版Version 6.0.1 (6A317)已经放出Mac AppStore,之前为了体验swift也安装过beta版,但是并没有注意到6系Xcode对于导出ipa的变化,更新正式版 ...

  4. linux下tftp安装与设置

    在学习linux+arm开发的时候,tftp和NFS是必不可少的环境.这里总结一下自己安装和使用tftp的一些经验,做个备忘. 一.tftp服务原理 tftp(trivial file transfe ...

  5. html list <==> unformatted list

    两者的区别很大不得不擦呢,任何两个东西的差别都很大,不得混淆.---一个有ul/ol的选择,一个没有

  6. 修复 SQLite 数据库文件

    目 录 第1章 说明    1 1 下载SQLite Tools    1 2 运行    2 第1章 说明 笔者编写的一个程序,无法往 SQLite 数据库文件里写数据.使用SQLiteSpy打开该 ...

  7. arcgis API for javascript 学习笔记

    ArcGis Server地图是缓存的,意味着它有服务器管理员简历提示性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMapServiceLayer表示 如果地图服务没有一个可用的 ...

  8. javascript 函数调用方式

    1. 通过函数名直接调用 函数名(实际参数): 2. 通过指向函数的变量去调用 var 变量=函数名: 变量(实际参数):

  9. MVC 特殊字符的显示

    @(new HtmlString(HttpUtility.HtmlDecode(GPDetail.SimpleDescription)))

  10. Java 集合系列 12 TreeMap

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...