快捷導(dǎo)航

基于JQuery的多標(biāo)簽實現(xiàn)代碼

更新時間：2012年09月19日 21:25:38 作者：

最近在學(xué)習(xí)JQuery，其實也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時間沒用，有些生疏了，于是就做幾個小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來

今天要分享的是基于JQuery實現(xiàn)的多標(biāo)簽的切換，JQuery就不用過多介紹了，網(wǎng)上一搜一大堆資料，當(dāng)然這樣的小示例也有很多，這里只是發(fā)表一些自己的想法。

下面是本次示例所使用的HTML頁面：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQueryProject1</title> 
<meta name="author" content="Frank_Ren" /> 
<link type="text/css" rel="stylesheet" href="css/myCSS.css" /> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script type="text/javascript" src="js/myJSFile.js"></script> 
<!-- Date: 2012-09-17 --> 
</head> 
<body> 
<div id="contenTab"> 
<ul> 
<li class="showTab"><a href="/">標(biāo)簽1</a></li> 
<li><a href="/">標(biāo)簽2</a></li> 
<li><a href="/">標(biāo)簽3</a></li> 
</ul> 
<div id="content"> 
<div class="showContent">這是內(nèi)容1</div> 
<div>這是內(nèi)容2</div> 
<div>這是內(nèi)容3</div> 
</div> 
</div> 
</body> 
</html> 

現(xiàn)在的頁面還看不出有有標(biāo)簽的效果，所以為了使頁面上出現(xiàn)標(biāo)簽效果，給一面添加一個CSS文件：

復(fù)制代碼代碼如下:

 
a{ 
display: block; 
text-decoration: none; 
color:white; 
} 
#contenTab ul{ 
list-style: none; 
padding:0px; 
margin:0px; 
} 
#content div.showContent{ 
line-height:100px; 
display: block; 
background-color:#B0C4DE; 
} 
.showTab{ 
background-color:#B0C4DE; 
border-bottom: 1px solid #B0C4DE; 
} 
div li{ 
background-color:#5F9EA0; 
border-bottom: 1px solid white; 
float: left; 
border-right: 1px solid white; 
color:black; 
height:30px; 
width:60px; 
line-height: 30px; 
text-align: center; 
} 
#content div{ 
background-color:#B0C4DE; 
display:none; 
clear: left; 
width:300px; 
height: 100px; 
} 

到目前為止頁面還只是靜態(tài)頁面，接下來就是最主要的的部分了，這部分就是實現(xiàn)通過鼠標(biāo)移動來切換標(biāo)簽，實現(xiàn)動態(tài)頁面，為了達(dá)到這個目的需要再添加一個JS文件，當(dāng)然基于JQuery就必然少不了JQuery的JS文件，本示例使用的是最新的jquery-1.8.1.min.js，可以到JQuery的官網(wǎng)獲得，下面是本次示例中實現(xiàn)標(biāo)簽切換的JS代碼：

復(fù)制代碼代碼如下:

 
$(function(){ 
$("#contenTab li").each(function(){ 
var tab = $(this); 
var timeoutID; 
tab.hover(function(){ 
timeoutID = setTimeout(function(){ 
$(".showTab").removeClass("showTab"); 
$(".showContent").removeClass("showContent"); 
tab.addClass("showTab"); 
$($("#content div").get($("#contenTab li").index(tab))).addClass("showContent"); 
},300); 
},function(){ 
clearTimeout(timeoutID); 
}); 
}); 
}); 

到目前為止已經(jīng)實現(xiàn)了多標(biāo)簽的切換。接下了記錄下本次示例的幾個注意事項：

1、為了實現(xiàn)當(dāng)鼠標(biāo)移到標(biāo)簽(也就是<li>)上讓鼠標(biāo)的形狀變成手形，本次示例是通過將<li>里面的內(nèi)容放在<a>里面來實現(xiàn)，當(dāng)然還有跟簡單的方法就是給<li>添加樣式cursor: pointer;。

2、在JS代碼中用到了var timeoutID = setTimeout(function,time)，這是為了避免鼠標(biāo)快速移動到來的誤操作，time是延時的時間，function里面的就是延時time毫秒過后要執(zhí)行的內(nèi)容，也就是說鼠標(biāo)移到標(biāo)簽上時不會實現(xiàn)立即切換的動作，而是要延時time毫秒過后才會響應(yīng)切換的動作，如果鼠標(biāo)在time毫秒之內(nèi)離開了標(biāo)簽，就會執(zhí)行clearTimeout(timeoutID)，這樣time毫秒之后就不會執(zhí)行function里面的內(nèi)容，這樣就避免了鼠標(biāo)快速移動帶來的誤操作。

今天就到這里了，希望對你會有所幫助。