在做选项卡的时候 为了达到更好的效果 需要将选项卡灵敏度做适当的降低,

<!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>