思路：取得头部和内容的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. JS实现复选框全选全不选以及子复选框带动全选框的选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Android保存图像到相册

    在应用的图集中,通常会给用户提供保存图片的功能,让用户可以将自己喜欢的图片保存到系统相册中. 这个功能其实很好做,系统提供了现成的API: 简单的来说就这一行代码: [java]  MediaStor ...

  3. Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结

    Mysql中utf8_general_ci与utf8_unicode_ci有什么区别呢?在编程语言中,通常用unicode对中文字符做处理,防止出现乱码,那么在MySQL里,为什么大家都使用utf8_ ...

  4. maven相关资料

    http://www.yiibai.com/maven/ Maven教程 https://www.zhihu.com/question/20104270 http://huangnx.com/tags ...

  5. C语言下动态库相互调用

    前段时间需要完成多个模块业务,而这些模块的接口都是一样的,于是为了方便管理就把每个模块都根据接口封装成了SO库,这里就留下SO库调用样例 SO库源文件代码: //TestSo.c #include & ...

  6. mysql:恢复mysql表结构

    mysql,frm格式恢复mysql表结构,以tuser.frm格式为例   新增数据库,如下,创建数据库名为ab   打开数据库,双击打开数据库   点右键新建表结构   新增表,里面只添加一个字段 ...

  7. HTTP 头部解释

    1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type. 2. Accept-Charset:浏览器申明自己 ...

  8. 线性表 - 从零开始实现by C++

    参考链接:数据结构探险之线性表篇     线性表

  9. C++从键盘输入文件结束符

            当我们使用一个istream对象作为条件时,其效果是检测流的状态.如果流是有效的,即流未遇到错误,那么检测成功.当遇到文件结束符,或遇到一个无效输入时(例如需要将输入读到一个int变量 ...

  10. mysql 存储过程 demo

    -- 查看存储过程 SHOW PROCEDURE STATUS; -- 显示pro存储过程的详细信息 SHOW CREATE PROCEDURE pro; -- 删除pro存储过程 DROP PROC ...