WEB前端

jquery tag 切换原理与例子

位置:首页 > WEB前端 > jquery教程,2017-05-12
具体jquery tag 切换实现效果如图: 原理很简单,就是监听鼠标滑动和点击事件。在第一个标签切换的示例中,当鼠标滑过某个标签时,就把class转移到当前标


具体jquery tag 切换实现效果如图:

jquery tag 切换(图1)

原理很简单,就是监听鼠标滑动和点击事件。在第一个标签切换的示例中,当鼠标滑过某个标签时,就把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


TAGS:jquery tag 切换



猜你喜欢


NewHot手机版