jquery tab标签页的制作

175 阅读 0 评论 116 点赞

我是靠谱客的博主年轻洋葱，最近开发中收集的这篇文章主要介绍jquery tab标签页的制作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件

1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2 mouseover事件，

还有就是关键的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">标签1</li> 
<li >标签2</li> 
<li >标签3</li> 
</ul> 
<div class="divarea">内容1</div> 
<div>内容2</div> 
<div>内容3</div> 
</BODY> 
</HTML> 

接下来就是控制样式的css

复制代码代码如下:

 
ul ,li { margin:0px; 
padding:0px; 
list-style:none; 
} 
li { float:left; 
background-color:#66CC00; 
margin-right:2px; //这个是设置标签之间的间距 
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标签 
$("li").each(function(index){ 

$(this).mouseover(function(){ 
//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要 
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); 
}); 
}); 
}); 
}); 