快捷導(dǎo)航

jquery tab標(biāo)簽頁的制作

更新時(shí)間：2010年05月10日 19:28:53 作者：

制作標(biāo)簽頁（通常說成滑動(dòng)門）的實(shí)現(xiàn)思路是當(dāng)鼠標(biāo)在標(biāo)簽上時(shí)下面div會(huì)顯示和標(biāo)簽相對應(yīng)的內(nèi)容，隨著標(biāo)簽的改變，下面的div也會(huì)對應(yīng)改變內(nèi)容

這里有一個(gè)內(nèi)容要特別注意的那就是給標(biāo)簽的mouseover事件設(shè)置延遲，這樣防止用戶惡意的移動(dòng)鼠標(biāo)導(dǎo)致放送大量的請求而是服務(wù)器崩潰，用到setTimeout函數(shù)，主要用到已下的事件

1 $().each(function(){}) 這個(gè)是個(gè)非常重要的遍歷所有標(biāo)簽的好辦法

2 mouseover事件，

還有就是關(guān)鍵的css樣式編寫，控制顯示的樣式，

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>tab </TITLE> 
<link rel="stylesheet" type="text/css" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/tab.js"></script> 
</HEAD> 

<BODY> 
<ul id="ularea"> 
<li class="listli">標(biāo)簽1</li> 
<li >標(biāo)簽2</li> 
<li >標(biāo)簽3</li> 
</ul> 
<div class="divarea">內(nèi)容1</div> 
<div>內(nèi)容2</div> 
<div>內(nèi)容3</div> 
</BODY> 
</HTML> 

接下來就是控制樣式的css

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

 
ul ,li { margin:0px; 
padding:0px; 
list-style:none; 
} 
li { float:left; 
background-color:#66CC00; 
margin-right:2px; //這個(gè)是設(shè)置標(biāo)簽之間的間距 
padding:5px; 
border:1px solid white; 
height:20px; 
color:white; 

} 
.listli { background-color:#663333; 
border:1px solid #663333; 

} 
div { clear:left; 
width:300px; 
height:100px; 
background-color:#663333; 
border-top:0px; 
color:white; 
display:none; 
} 

.divarea { display:block; } 

下來就是編寫控制滑動(dòng)的js

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

 
//定義全局變量 
var timeout; 
$(document).ready(function(){ 
//找到所有的li標(biāo)簽 
$("li").each(function(index){ 

$(this).mouseover(function(){ 
//滑動(dòng)門都要設(shè)置一個(gè)延遲時(shí)間，避免用戶瘋狂移動(dòng)鼠標(biāo)，導(dǎo)致服務(wù)器崩潰，這個(gè)很重要 
timeout =setTimeout(function(){ 
$("div.divarea").removeClass("divarea"); 
$("li.listli").removeClass("listli"); 
// $("div").eq(index).addClass("divarea"); //另一種寫法是:$(div:eq(index)).addClass("divarea"); 
$("div:eq("+index+")").addClass("divarea"); 
$("li").eq(index).addClass("listli"); 
}, 
320); 
$(this).mouseout(function(){ 
clearTimeout(timeout); 
}); 
}); 
}); 
}); 