具体实现效果如图:

原理很简单,就是监听鼠标滑动和点击事件。在第一个标签切换的示例中,当鼠标滑过某个标签时,就把class转移到当前标签。这里用到的jQuery方法主要是each()确定当前是哪一个标签,确定好以后,在设置鼠标的mouseover和mouseout事件。即:

/**
* Created by Administrator on 2016/7/30.
*/
$(document).ready(
$("#tabFirst li").each(function(index){
var liNode=$(this);
$(this).mouseover(function(){ }).mouseout(function(){ });
})
);

  然后具体的mouseover里面,先remove原先的class,然后把class add到当前的标签里。具体代码:

$("div .content").removeClass("content");
$("#tabFirst li.tabNow").removeClass("tabNow");
$("div").eq(index).addClass("content");
$(this).addClass("tabNow");

  这时候第一个标签切换的效果就完成了。但是为了更好的用户体验,给鼠标滑过的效果添加了一个延迟。使得更有切换的效果。添加了一个setTimeout方法。要注意setTimeout方法的使用语法。要和clearTimeout成对使用。标签切换效果1代码如下:

var time;
$(document).ready(
$("#tabFirst li").each(function(index){
var liNode=$(this);
$(this).mouseover(function(){
time=setTimeout(function(){
$("div .content").removeClass("content");
$("#tabFirst li.tabNow").removeClass("tabNow");
$("div").eq(index).addClass("content");
$(this).addClass("tabNow");
},300)
}).mouseout(function(){
clearTimeout(time);
});
})
);

  至于下面的切换效果,原理相同,但是在div中加载的数据分为本地html页面以及网络数据。load方法解决就行。代码如下:

$("#realContent").load("0menu.html");
$("#tabSecond li").each(function(index){
$(this).click(function(){
$("#tabSecond li.tabNow").removeClass("tabNow");
$(this).addClass("tabNow");
if(index==0){
$("#realContent").load("0menu.html");
}else if(index==1){
$("#realContent").load("tab.jsp h2");
}else if(index==2){
$("#realContent").load("tab.jsp");
}
});
});

  基本上就是jQuery的几个方法的混合应用。被我当成实例放在这里。工程文件打包下载地址:http://pan.baidu.com/s/1jIlSGy6

  

实例:jQuery实现标签切换的更多相关文章

  1. Jquery 实现标签切换效果

    1.效果图 2.HTML代码如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> & ...

  2. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...

  3. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  4. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

  7. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

  8. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  9. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

随机推荐

  1. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  2. 使用BAPI_ACC_DOCUMENT_POST,创建会计凭证,用BADI扩展字段(转)

    业务需求:和银行做一个接口,要通过银行流水产生会计凭证,会计凭证的事务码是F-02,查到了BAPI方法BAPI_ACC_DOCUMENT_POST.昨天测试发现,有一些参数在BAPI_ACC_DOCU ...

  3. 安装php 带debug

    gdb安装包   在CentOS6.4下使用gdb进行调试的时候, 使用bt(breaktrace)命令时,会弹出如下的提示: 头一天提示: Missing separate debuginfos, ...

  4. file上传图片获取路径地址

    file上传图片获取路径地址 类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址 类似这样 原理:通过opacity来隐藏原生的input file 然后用.file-bt ...

  5. python3全栈开发-并发编程的多进程理论

    一. 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): duoduo在一个时间段内有很多任务要做:python备课的任务,写 ...

  6. Java语法基础常见疑惑解答

    1. 类是java的最小单位,java的程序必须在类中才能运行 2. java函数加不加static有何不同 java中声明为static的方法称为静态方法或类方法.静态方法可以直接调用静态方法,访问 ...

  7. CentOS+Uwsgi+Nginx发布Flask开发的WebAPI

    1.WebAPI 开发工具VS 于Windows环境中开发完成后使用SFTP进行同步文件到Centos中使用 2.重点:WebAPI触发的方法是为了发送Celery异步调度任务 Celery框架使用涉 ...

  8. 10-hdfs-hdfs搭建

    hdfs的优缺点比较: 架构图解分析: nameNode的主要任务: SNameNode的功能: (不是NN的备份, 主要用来合并fsimage) 合并流程: dataNode的主要功能: HDFS上 ...

  9. eclipse中点不出来提示

    当在用eclipse或是myeclipse时,可能会遇到不能自动提示,就是当你用到点的时候,后面不会出现相关的提示信息.这时,解决方法如下 : 1.菜单window->Preferences-& ...

  10. VS2012 QT5.2.0 无法解析的外部符号

    背景:在新建QT工程时,可能没有选择一些库,虽然在头文件中引用了,但是程序依然无法识别 现象:一般出现"LNK2019"错误. 解决:以网络为例,在VS2012中加入网络库,分为两 ...