在做选项卡的时候 为了达到更好的效果 需要将选项卡灵敏度做适当的降低,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery实现选项卡延迟</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> *{ margin:0; padding:0;} li{ list-style:none; float:left; width:80px; line-height:30px; text-align:center;} body{ text-align:center;} p{ text-indent:2em;} .box{ margin:60px auto; width:400px; border:1px solid #cccccc; overflow:hidden; text-align:left} .nav{ height:30px; background-color:#efefef;} .con{ font-size:12px; overflow:hidden; min-height:200px; padding:10px;} .c{ display:none; line-height:21px;} </style> </head> <body> <div class="box"> <div class="nav"> <ul> <li>新闻资讯</li> <li>前沿科技</li> <li>我爱网游</li> <li>说三道四</li> </ul> </div> <div class="con"> <div class="c"> <p>请客文化在改变:以前请客都请吃饭,但是现在越来越多的是请玩,<span style="color:#993333">因为大家都已解决了温饱问题了,更多的是去追求精神的享受。</span>所以请客800不仅仅是餐饮预订,更重要的是KTV、<b>夜总会</b>、休闲沐浴、茶楼、商务招待等休闲娱乐方面的预订。</p> </div> <div class="c"> <p>前沿科技,这两个网站,<span style="color:blue;">站到</span>你的角度,你更看好那一个呢?</p> </div> <div class="c"> <p>我爱网游,请客文化在《》<strong>改变要</strong>的是KTV、夜总会、休闲</p> </div> <div class="c"> <p>Http://www.baidu.com休闲沐浴、茶楼、商务招待等休闲娱乐方面的预订。</p> </div> </div> </div> <script type="text/javascript"> var colors=new Array( "#cccccc","#666666","#999999","black" );//定义边框颜色数组 $(function(){ show(0); var timer;//时钟 $(".nav ul").find("li").each(function(index){ $(this).mouseover(function(){ try{clearInterval(timer);}catch(e){} timer=setTimeout(function(){show(index);},260);//推迟200毫秒显示选项卡,数字越小越灵敏 }); }); }); function show(index){ $(".con .c").css("display","none");//隐藏所有 $(".nav ul").find("li").css("color","black"); $(".con .c").eq(index).css("display","block");//显示当前 $(".nav ul").find("li").eq(index).css("color","blue"); //$(".box").css("border-color",colors[index]);//改变边框颜色 } </script> </body> </html>