基于JQuery的多標簽實現代碼

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

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

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

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

 
<!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="/">標簽1</a></li> 
<li><a href="/">標簽2</a></li> 
<li><a href="/">標簽3</a></li> 
</ul> 
<div id="content"> 
<div class="showContent">這是內容1</div> 
<div>這是內容2</div> 
<div>這是內容3</div> 
</div> 
</div> 
</body> 
</html> 

現在的頁面還看不出有有標簽的效果，所以為了使頁面上出現標簽效果，給一面添加一個CSS文件：

復制代碼代碼如下:

 
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)頁面，接下來就是最主要的的部分了，這部分就是實現通過鼠標移動來切換標簽，實現動態(tài)頁面，為了達到這個目的需要再添加一個JS文件，當然基于JQuery就必然少不了JQuery的JS文件，本示例使用的是最新的jquery-1.8.1.min.js，可以到JQuery的官網獲得，下面是本次示例中實現標簽切換的JS代碼：

復制代碼代碼如下:

 
$(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); 
}); 
}); 
}); 

到目前為止已經實現了多標簽的切換。接下了記錄下本次示例的幾個注意事項：

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

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

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