在制作jqeury 标签页时，要注意，标签的mouseover事件设置延迟，防止用户恶意的移动鼠标导致放送大量的请求而导致服务器崩溃，需要用到setTimeout函数，主要是以下的事件：
1、$().each(function(){}) //遍历所有标签的好办法
2、mouseover事件，
另外，要注意css样式的编写，不然会样式错乱的哦。
好了，开始今天的jquery 教程吧。
1、前台页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Jquery tab 标签页效果 - 脚本学堂_www.jb200.com</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>
2、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; }
3、控制滑动的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); }); }); }); });
好了，以上全部完成后，一个漂亮的jquery tab标签页效果就完成了。
脚本学堂，祝大家学习进步。