思路：取得头部和内容的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. hdu3264Open-air shopping malls(二分）

    链接 枚举伞的圆心,最多只有20个,因为必须与某个现有的圆心重合. 然后再二分半径就可以了. #include <iostream> #include<cstdio> #inc ...

  2. intersection-of-two-arrays-ii

    https://leetcode.com/problems/intersection-of-two-arrays-ii/ class Solution { public: vector<int& ...

  3. datatables使用

    //4.多列排序 //示例:http://www.guoxk.com/html/DataTables/Multi-column-sorting.html //5.隐藏某些列 $(document).r ...

  4. python语法笔记（七）

    python标准库 Python有一套很有用的标准库(standard library).标准库会随着Python解释器,一起安装在你的电脑中的.它是Python的一个组成部分.这些标准库是Pytho ...

  5. vim 学习记录

    VIM中PHP代码使用tab键自动完成 更新于 2013-01-18 05:47:55UEANER 目录结构 $ tree -C ~/.vim | grep -v ".cnx" | ...

  6. php学习记录 易混淆

    1.echo和print的区别 PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以 ...

  7. listview去掉底部多出的边框黑色

    listview去掉底部多出的边框黑色 android:fadingEdge="none" //去掉listview黑色底边 listview.setDivider(null);

  8. EXEL表格读取 按键精灵

    EXEL表格读取(1,m)(2,m)表格信息,m为行数 以下为本帖隐藏内容 ============================== Call Plugin.Office.OpenXls(&quo ...

  9. 例题：打印正三角形。两层for循环，难点明白行与列的关系

    while (true)            {                string s = "★";//s代表五角星                string t = ...

  10. LaTeX内容总结

    欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...