jquery tab标签页的制作 |
本文标签: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); }); }); }); }); |