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