实例：jQuery实现标签切换

具体实现效果如图：

实例：jQuery实现标签切换

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

相关推荐