思路：取得头部和内容的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. Switch用法

    package com.cz.test; public class SwitchExample1 { /** * @param args */ public static void main(Stri ...

  2. web设计经验<四>设计师必备的20条设计黄金法则

    编者按:以下内容摘自<美国视觉设计学院之完形设计>,新手可以多看这些法则,并运用到你的设计过程中,防止自己做出甲方式审美的作品. 一.必须有一个概念 设计从创意开始.这可能是非常不确定的— ...

  3. Android linearlayout常用布局

    用linearlayout完成这样的布局效果,这样的布局还是比较常用的,具体的xml代码如下: <LinearLayout xmlns:android="http://schemas. ...

  4. 算法_栈与队列的Java链表实现

    链表是一个递归的数据结构,它或者为null,或者是指向一个结点的引用,该结点含有一个泛型的元素和指向另一个链表的引用.可以用一个内部类来定义节点的抽象数据类型: private class Node ...

  5. Android aidl Binder框架浅析

      转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38461079 ,本文出自[张鸿洋的博客] 1.概述 Binder能干什么?B ...

  6. oninput,onpropertychange,onchange的用法和区别【转载】

    1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange, ...

  7. python操作mongodb之六自定义类型存储

    from pymongo.mongo_client import MongoClient client=MongoClient('192.168.30.252',27017) client=drop_ ...

  8. Android Snackbar

    使用Snackbar我们可以在屏幕底部(大多时候)快速弹出消息,它和Toast非常相似,但是它更灵活一些. 当它显示一段时间后或用户与屏幕交互时它会自动消失. 可以自定义action-可选操作. sw ...

  9. jmeter 建立一个监控测试计划

    监控 压力测试和系统管理是有用的. 使用压力 测试,服务器性能监控提供了额外的信息. 这也使得它更容易看到服务器性能之间的关系 在客户端和响应时间. 作为一个系统管理工具, 监控提供了一种简单的方法来 ...

  10. spring来了-06-事务控制

    概述 编程式事务控制 自己手动控制事务,就叫做编程式事务控制. Jdbc代码: Conn.setAutoCommite(false);  // 设置手动控制事务 Hibernate代码: Sessio ...