鼠标移入Tab的时候会有一定的延时才会切换到相应的项，防止用户不经意的鼠标操作，点击相应的项也可以切换 效果图： 源代码： 复制代码 代码如下: Tab标签切换 <BR>body{ background:#fff;} <BR>*{ margin:0; padding:0;} <BR>.box{ margin:20px; } <BR>.container{background:#FFF; width:500px; clear:both; margin-top:1px; _margin-top:-1px;} <BR>.sub-con{height:300px; width:500px;border:1px solid #3CF; background:#FFF; display:none;} <BR>.cur-sub-con{ display:block;} <BR>.sub-con a{ line-height:40px} <BR>.sub-con p{ text-align:center} <BR>.nav{ width:370px; height:28px; margin-left:10px;} <BR>.nav ul{width:370px; height:28px;} <BR>.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;} <BR>.nav ul li a{ background:#fff;border:1px solid #3CF; text-decoration:none; color:#000; height:28px;display:block;} <BR>.nav ul li a:hover{ background:#CCEDFB} <BR>.nav ul li a.cur{ z-index:9999;border-bottom:1px solid #FFF; color:#F00;} <BR> Tab项1 Tab项2 Tab项3 Tab项4 这是容器1 这是容器2 这是容器3 这是容器4 <BR>$(document).ready(function(){ <BR>var intervalID; <BR>var curLi; <BR>$(".nav li a").mouseover(function(){ <BR>curLi=$(this); <BR>intervalID=setInterval(onMouseOver,250);//鼠标移入的时候有一定的延时才会切换到所在项，防止用户不经意的操作 <BR>}); <BR>function onMouseOver(){ <BR>$(".cur-sub-con").removeClass("cur-sub-con"); <BR>$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); <BR>$(".cur").removeClass("cur"); <BR>curLi.addClass("cur"); <BR>} <BR>$(".nav li a").mouseout(function(){ <BR>clearInterval(intervalID); <BR>}); <br><br>$(".nav li a").click(function(){//鼠标点击也可以切换 <BR>clearInterval(intervalID); <BR>$(".cur-sub-con").removeClass("cur-sub-con"); <BR>$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); <BR>$(".cur").removeClass("cur"); <BR>curLi.addClass("cur"); <BR>}); <br><br>}); <BR>
