欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2012年09月19日 21:25:38   作者:  
最近在學(xué)習(xí)JQuery,其實(shí)也不叫學(xué)習(xí),很久以前就學(xué)過,只是有一段時間沒用,有些生疏了,于是就做幾個小例子來練習(xí)練習(xí),為了方便以后查找就將這些小示例記錄下來
今天要分享的是基于JQuery實(shí)現(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)頁面,接下來就是最主要的的部分了,這部分就是實(shí)現(xiàn)通過鼠標(biāo)移動來切換標(biāo)簽,實(shí)現(xiàn)動態(tài)頁面,為了達(dá)到這個目的需要再添加一個JS文件,當(dāng)然基于JQuery就必然少不了JQuery的JS文件,本示例使用的是最新的jquery-1.8.1.min.js,可以到JQuery的官網(wǎng)獲得,下面是本次示例中實(shí)現(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)實(shí)現(xiàn)了多標(biāo)簽的切換。接下了記錄下本次示例的幾個注意事項:

1、為了實(shí)現(xiàn)當(dāng)鼠標(biāo)移到標(biāo)簽(也就是<li>)上讓鼠標(biāo)的形狀變成手形,本次示例是通過將<li>里面的內(nèi)容放在<a>里面來實(shí)現(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)簽上時不會實(shí)現(xiàn)立即切換的動作,而是要延時time毫秒過后才會響應(yīng)切換的動作,如果鼠標(biāo)在time毫秒之內(nèi)離開了標(biāo)簽,就會執(zhí)行clearTimeout(timeoutID),這樣time毫秒之后就不會執(zhí)行function里面的內(nèi)容,這樣就避免了鼠標(biāo)快速移動帶來的誤操作。

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

相關(guān)文章

最新評論