執行個體：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實現標籤切換