鼠標移入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");

});

});

總結

以上是生活随笔為你收集整理的html tab切换jquery,jQuery版Tab标签切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。