jQuery版Tab標(biāo)簽切換
更新時(shí)間：2011年03月16日 23:58:43 作者：
網(wǎng)上常見(jiàn)的應(yīng)用，用jQuery實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，只有幾行代碼。
鼠標(biāo)移入Tab的時(shí)候會(huì)有一定的延時(shí)才會(huì)切換到相應(yīng)的項(xiàng)，防止用戶不經(jīng)意的鼠標(biāo)操作，點(diǎn)擊相應(yīng)的項(xiàng)也可以切換
效果圖：
源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab標(biāo)簽切換</title>
</head>
<style>
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;}
</style>
<body>
<div class="box">
<div class="nav">
<ul>
<li><a href="javascript:void(0)" class="cur">Tab項(xiàng)1</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)2</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)3</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)4</a></li>
</ul>
</div>
<div class="container">
<div class="sub-con cur-sub-con"> <a href="#" title="這是容器1">這是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器2">這是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器3">這是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器4">這是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var intervalID;
var curLi;
$(".nav li a").mouseover(function(){
curLi=$(this);
intervalID=setInterval(onMouseOver,250);//鼠標(biāo)移入的時(shí)候有一定的延時(shí)才會(huì)切換到所在項(xiàng)，防止用戶不經(jīng)意的操作
});
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(){//鼠標(biāo)點(diǎn)擊也可以切換
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");
});
});
</script>
</html>
效果圖：
源代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab標(biāo)簽切換</title>
</head>
<style>
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;}
</style>
<body>
<div class="box">
<div class="nav">
<ul>
<li><a href="javascript:void(0)" class="cur">Tab項(xiàng)1</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)2</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)3</a></li>
<li><a href="javascript:void(0)">Tab項(xiàng)4</a></li>
</ul>
</div>
<div class="container">
<div class="sub-con cur-sub-con"> <a href="#" title="這是容器1">這是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器2">這是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器3">這是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="這是容器4">這是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var intervalID;
var curLi;
$(".nav li a").mouseover(function(){
curLi=$(this);
intervalID=setInterval(onMouseOver,250);//鼠標(biāo)移入的時(shí)候有一定的延時(shí)才會(huì)切換到所在項(xiàng)，防止用戶不經(jīng)意的操作
});
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(){//鼠標(biāo)點(diǎn)擊也可以切換
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");
});
});
</script>
</html>
相關(guān)文章
給Easyui-Datebox設(shè)置隱藏或者不可用的解決方法
最近我在做一個(gè)安全監(jiān)測(cè)系統(tǒng)，選擇了用easyui進(jìn)行搭建，easyui是一種基于jQuery的用戶界面插件集合。使用easyui可以省去很多代碼，功能上需要加一些樣式。下面小編給大家介紹下給Easyui-Datebox設(shè)置隱藏或者不可用的解決方法2017-05-05
大部分jQuery插件都是這種類型的插件，由于這種插件是將對(duì)象方法封裝起來(lái)，在jQuery選擇器獲取jQuery對(duì)象過(guò)程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢(shì)2012-09-09
jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jQuery對(duì)下拉框,單選框,多選框的操作需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery仿Flash上下翻動(dòng)的中英文導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery仿Flash上下翻動(dòng)的中英文導(dǎo)航菜單,實(shí)例分析了jQuery實(shí)現(xiàn)Flash反動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法,需要的朋友可以參考下2015-02-02
JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery插件StickUp實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航置頂
本文給大家介紹的是一款jQuery插件--StickUp，他的主要用途是實(shí)現(xiàn)網(wǎng)頁(yè)元素固定，如導(dǎo)航固定讓其總是保持在視圖中可見(jiàn)，效果非常不錯(cuò)，這里推薦給小伙伴們。2015-04-04
這篇文章主要為大家詳細(xì)介紹了使用jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
判斷對(duì)象是否Window的實(shí)現(xiàn)代碼
判斷對(duì)象是否Window的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2012-01-01