jq的tab切换ajax,jQuery版Tab标签切换

鼠标移入Tab的时候会有一定的延时才会切换到相应的项，防止用户不经意的鼠标操作，点击相应的项也可以切换

效果图：

源代码：

Tab标签切换

body{ background:#fff;}

*{ margin:0; padding:0;}

.box{ margin:20px; }

.container{background:#FFF; width:500px; clear:both; margin-top:1px; _margin-top:-1px;}

.sub-con{height:300px; width:500px;border:1px solid #3CF; background:#FFF; display:none;}

.cur-sub-con{ display:block;}

.sub-con a{ line-height:40px}

.sub-con p{ text-align:center}

.nav{ width:370px; height:28px; margin-left:10px;}

.nav ul{width:370px; height:28px;}

.nav ul li{ list-style:none; display:inline-block;width:60px; height:28px;line-height:28px; text-align:center;margin-left:-9px;*float:left;*margin-left:-1px;}

.nav ul li a{ background:#fff;border:1px solid #3CF; text-decoration:none; color:#000; height:28px;display:block;}

.nav ul li a:hover{ background:#CCEDFB}

.nav ul li a.cur{ z-index:9999;border-bottom:1px solid #FFF; color:#F00;}

• Tab项1
• Tab项2
• Tab项3
• Tab项4

这是容器1

这是容器2

这是容器3

这是容器4

$(document).ready(function(){

var intervalID;

var curLi;

$(".nav li a").mouseover(function(){

curLi=$(this);

intervalID=setInterval(onMouseOver,250);//鼠标移入的时候有一定的延时才会切换到所在项，防止用户不经意的操作

});

function onMouseOver(){

$(".cur-sub-con").removeClass("cur-sub-con");

$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con");

$(".cur").removeClass("cur");

curLi.addClass("cur");

}

$(".nav li a").mouseout(function(){

clearInterval(intervalID);

});

$(".nav li a").click(function(){//鼠标点击也可以切换

clearInterval(intervalID);

$(".cur-sub-con").removeClass("cur-sub-con");

$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con");

$(".cur").removeClass("cur");

curLi.addClass("cur");

});

});