具體實現效果如圖：
原理很簡單，就是監聽鼠標滑動和點擊事件。在第一個標簽切換的示例中，當鼠標滑過某個標簽時，就把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