實例：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