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

2024-05-06 14:10:04

字體：大中小

供稿：網(wǎng)友

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

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

2 mouseover事件，

還有就是關(guān)鍵的css樣式編寫，控制顯示的樣式，
代碼如下:
<!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
代碼如下:
ul ,li { margin:0px;
padding:0px;
list-style:none;
}
li { float:left;
background-color:#66CC00;
margin-right:2px; //這個是設(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; }

下來就是編寫控制滑動的js
代碼如下:
//定義全局變量
var timeout;
$(document).ready(function(){
//找到所有的li標(biāo)簽
$("li").each(function(index){

$(this).mouseover(function(){
//滑動門都要設(shè)置一個延遲時間，避免用戶瘋狂移動鼠標(biāo)，導(dǎo)致服務(wù)器崩潰，這個很重要
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);
});
});
});
});

上一篇：JS 文件傳參及處理技巧分析

下一篇：js 實現(xiàn)復(fù)制到粘貼板的功能代碼