如何给切换菜单设定触发时间（延迟时间

希望这个菜单鼠标停留3秒后才触发JS~网上很多代码都能实现这个效果~ 但因为我的网站很多地方使用了此代码..如果换新的菜单代码非常麻烦。所以希望能修改原先的代码来实现这个功能，麻烦各位帮我看看，谢谢。
<!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>滑动门</title> 
<script type="text/javascript"> 
function nTabs(thisObj,Num){ 
if(thisObj.className == "active")return; 
var tabObj = thisObj.parentNode.id; 
var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
for(i=0; i <tabList.length; i++) 
{ 
if (i == Num) 
{ 
thisObj.className = "active"; 
document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
}else{ 
tabList[i].className = "normal"; 
document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
} 
} 
} 
</script> 
</head> 
<body> 
<br /> 
<br /> 
<div align="center" style="padding-left:25px;"> 
<!-- 选项卡0开始可以调整style=width:451px 数字为适合你网站宽度的数字 --> 
<div class="nTab" style=width:451px> 
<!-- 标题开始 --> 
<div class="TabTitle"> 
<ul id="myTab0"> 
<li class="active" onmouseover="nTabs(this,0);">全部</li> 
<li class="normal" onmouseover="nTabs(this,1);">日志</li> 
<li class="normal" onmouseover="nTabs(this,2);">咨询</li> 
<li class="normal" onmouseover="nTabs(this,3);">相册</li> 
<li class="normal" onmouseover="nTabs(this,4);">商城</li> 
<li class="normal" onmouseover="nTabs(this,5);">社区</li> 
</ul> 
</div> 
<!-- 内容开始 --> 
<div class="TabContent"> 
<div id="myTab0_Content0"> 000 </div> 
<div id="myTab0_Content1" class="none">111</div> 
<div id="myTab0_Content2" class="none">222</div> 
<div id="myTab0_Content3" class="none">333</div> 
<div id="myTab0_Content4" class="none">444</div> 
<div id="myTab0_Content5" class="none">555</div> 
</div> 
</div> 
 
</div> 
</body> 
</html>

解决方案 »

  1.   

    <!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>滑动门 </title>
    <script type="text/javascript">
    var i = 0, t, tabObj;
    function nTabs(thisObj,Num){
    if(i < 3){
    if(!tabObj)tabObj = thisObj.parentNode.id;
    t = setTimeout("nTabs('"+thisObj+"','"+Num+"')", 200);
    i += 0.2;
    }else{
    clearTimeout(t);
    i = 0;
    if(thisObj.className == "active")return;
    // var tabObj = thisObj.parentNode.id;
    var tabList = document.getElementById(tabObj).getElementsByTagName("li");
    for(i=0; i  <tabList.length; i++){
    if (i == Num){
    thisObj.className = "active";
    document.getElementById(tabObj+"_Content"+i).style.display = "block";
    }else{
    tabList[i].className = "normal";
    document.getElementById(tabObj+"_Content"+i).style.display = "none";
    }
    }
    }
    }
    function resetI(){
    clearTimeout(t);
    tabObj = null;
    i = 0;
    }
    </script>
    </head>
    <body>
    <br />
    <br />
    <div align="center" style="padding-left:25px;">
    <!-- 选项卡0开始可以调整style=width:451px 数字为适合你网站宽度的数字 -->
    <div class="nTab" style=width:451px>
    <!-- 标题开始 -->
    <div class="TabTitle">
    <ul id="myTab0">
    <li class="active" onmouseover="nTabs(this,0);" onmouseout="resetI()">全部 </li>
    <li class="normal" onmouseover="nTabs(this,1);" onmouseout="resetI()">日志 </li>
    <li class="normal" onmouseover="nTabs(this,2);" onmouseout="resetI()">咨询 </li>
    <li class="normal" onmouseover="nTabs(this,3);" onmouseout="resetI()">相册 </li>
    <li class="normal" onmouseover="nTabs(this,4);" onmouseout="resetI()">商城 </li>
    <li class="normal" onmouseover="nTabs(this,5);" onmouseout="resetI()">社区 </li>
    </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
    <div id="myTab0_Content0"> 000  </div>
    <div id="myTab0_Content1" class="none">111 </div>
    <div id="myTab0_Content2" class="none">222 </div>
    <div id="myTab0_Content3" class="none">333 </div>
    <div id="myTab0_Content4" class="none">444 </div>
    <div id="myTab0_Content5" class="none">555 </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    3秒整
      

  2.   


    测试通过
    <!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>滑动门</title>
    <script type="text/javascript">  
    var timed;
    function nTabs(thisObj,Num){ 
    clearTimeout(timed); 
      timed = setTimeout(function () {
     if(thisObj.className == "active")return;  
     var tabObj = thisObj.parentNode.id;  
     var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
     for(i=0; i  <tabList.length; i++) {  
     if (i == Num) {  
     thisObj.className = "active";  
     document.getElementById(tabObj+"_Content"+i).style.display = "block";  
     } else {  
     tabList[i].className = "normal";  
     document.getElementById(tabObj+"_Content"+i).style.display = "none";  
     }  
     }  
    }, 1000 * 3);
    thisObj.onmouseout = function () {
    clearTimeout(timed); 
    };
    }  
     </script>
    </head>
    <body>
    <br />
    <br />
    <div align="center" style="padding-left: 25px;">
    <!-- 选项卡0开始可以调整style=width:451px 数字为适合你网站宽度的数字 -->
    <div class="nTab" style="width: 451px">
    <!-- 标题开始 -->
    <div class="TabTitle">
    <ul id="myTab0">
    <li class="active" onmouseover="nTabs(this,0);">
    全部
    </li>
    <li class="normal" onmouseover="nTabs(this,1);">
    日志
    </li>
    <li class="normal" onmouseover="nTabs(this,2);">
    咨询
    </li>
    <li class="normal" onmouseover="nTabs(this,3);">
    相册
    </li>
    <li class="normal" onmouseover="nTabs(this,4);">
    商城
    </li>
    <li class="normal" onmouseover="nTabs(this,5);">
    社区
    </li>
    </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
    <div id="myTab0_Content0">
    000
    </div>
    <div id="myTab0_Content1" class="none">
    111
    </div>
    <div id="myTab0_Content2" class="none">
    222
    </div>
    <div id="myTab0_Content3" class="none">
    333
    </div>
    <div id="myTab0_Content4" class="none">
    444
    </div>
    <div id="myTab0_Content5" class="none">
    555
    </div>
    </div>
    </div> </div>
    </body>
    </html>
      

  3.   

    我再蓝色得到另一种方法，好像差不多，又好像多一段代码，不知道什么意思？再这里分享一下<!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>滑动门</title> 
    <script type="text/javascript"> 
    var timeHandler=null;
    function nTabs(thisObj,Num){
    if(!thisObj.onmouseout){
    thisObj.onmouseout=function(){clearTimeout(timeHandler);}
    }
    clearTimeout(timeHandler);
    timeHandler=setTimeout(function(thisObj,Num){return function(){nTabs1(thisObj,Num)}}(thisObj,Num),3000);
    }
    function nTabs1(thisObj,Num){
    if(thisObj.className == "active")return; 
    var tabObj = thisObj.parentNode.id; 
    var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
    for(i=0; i <tabList.length; i++) 
    { 
    if (i == Num) 
    { 
    thisObj.className = "active"; 
    document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
    }else{ 
    tabList[i].className = "normal"; 
    document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
    } 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <br /> 
    <br /> 
    <div align="center" style="padding-left:25px;"> 
    <!-- 选项卡0开始可以调整style=width:451px 数字为适合你网站宽度的数字 --> 
    <div class="nTab" style=width:451px> 
    <!-- 标题开始 --> 
    <div class="TabTitle"> 
    <ul id="myTab0"> 
    <li class="active" onmouseover="nTabs(this,0);">全部</li> 
    <li class="normal" onmouseover="nTabs(this,1);">日志</li> 
    <li class="normal" onmouseover="nTabs(this,2);">咨询</li> 
    <li class="normal" onmouseover="nTabs(this,3);">相册</li> 
    <li class="normal" onmouseover="nTabs(this,4);">商城</li> 
    <li class="normal" onmouseover="nTabs(this,5);">社区</li> 
    </ul> 
    </div> 
    <!-- 内容开始 --> 
    <div class="TabContent"> 
    <div id="myTab0_Content0"> 000 </div> 
    <div id="myTab0_Content1" class="none">111</div> 
    <div id="myTab0_Content2" class="none">222</div> 
    <div id="myTab0_Content3" class="none">333</div> 
    <div id="myTab0_Content4" class="none">444</div> 
    <div id="myTab0_Content5" class="none">555</div> 
    </div> 
    </div> 
     
    </div> 
    </body> 
    </html>
      

  4.   

    不好意思，发现了一个问题
    代码单独使用没有问题，但是和其他js代码放到js文件里面调用时，有时正常 ，有时出现“缺少对象”出错行正式菜单所在的行？不知道这个又是什么问题
      

  5.   

    有可能是：var i = 0, t以及我用到变量i、t起冲突了，你将i和t换个其他的变量代替，尤其是i，你改成k了什么的试一试
      

  6.   

    可以帮我改一下嘛？我改了i就出错~我JS很菜的
      

  7.   

    <!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>滑动门 </title>
    <script type="text/javascript">
    var ii = 0, t, tabObj;
    function nTabs(thisObj,Num){
    if(ii < 3){
    if(!tabObj)tabObj = thisObj.parentNode.id;
    t = setTimeout("nTabs('"+thisObj+"','"+Num+"')", 200);
    ii += 0.2;
    }else{
    clearTimeout(t);
    ii = 0;
    if(thisObj.className == "active")return;
    // var tabObj = thisObj.parentNode.id;
    var tabList = document.getElementById(tabObj).getElementsByTagName("li");
    for(i=0; i <tabList.length; i++){
    if (i == Num){
    thisObj.className = "active";
    document.getElementById(tabObj+"_Content"+i).style.display = "block";
    }else{
    tabList[i].className = "normal";
    document.getElementById(tabObj+"_Content"+i).style.display = "none";
    }
    }
    }
    }
    function resetI(){
    clearTimeout(t);
    tabObj = null;
    ii = 0;
    }
    </script>
    </head>
    <body>
    <br />
    <br />
    <div align="center" style="padding-left:25px;">
    <!-- 选项卡0开始可以调整style=width:451px 数字为适合你网站宽度的数字 -->
    <div class="nTab" style=width:451px>
    <!-- 标题开始 -->
    <div class="TabTitle">
    <ul id="myTab0">
    <li class="active" onmouseover="nTabs(this,0);" onmouseout="resetI()">全部 </li>
    <li class="normal" onmouseover="nTabs(this,1);" onmouseout="resetI()">日志 </li>
    <li class="normal" onmouseover="nTabs(this,2);" onmouseout="resetI()">咨询 </li>
    <li class="normal" onmouseover="nTabs(this,3);" onmouseout="resetI()">相册 </li>
    <li class="normal" onmouseover="nTabs(this,4);" onmouseout="resetI()">商城 </li>
    <li class="normal" onmouseover="nTabs(this,5);" onmouseout="resetI()">社区 </li>
    </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
    <div id="myTab0_Content0"> 000 </div>
    <div id="myTab0_Content1" class="none">111 </div>
    <div id="myTab0_Content2" class="none">222 </div>
    <div id="myTab0_Content3" class="none">333 </div>
    <div id="myTab0_Content4" class="none">444 </div>
    <div id="myTab0_Content5" class="none">555 </div>
    </div>
    </div>
    </div>
    </body>
    </html>这回试一试