帮忙让切换有时间间隔。

a b c d 点的时候让他0.5秒在切换
<!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>abcd</title>
<style type="text/css">
#l_Tab1{width: 520px;margin-right: auto;margin-left: auto;}
.lb_box {width: 450px;height: 20px;float: left;display: inline;}
.lb_box ul{list-style:none;height: 20px;width: 480px;float: left;}
.lb_box li{float:left;cursor:pointer;width:50px;
color:#FF0000;text-decoration: underline;height: 13px;text-align: center;font-size: 13px;margin-left: 12px;border: 1px solid #000000;}
.lb_box li.hover{width:30px;color:#000000;font-weight: bold;font-size: 14px;text-decoration: none;height: 13px;}
#sz_1,#sz_2,#sz_3,#sz_4{height: 77px;width: 250px;border: 1px solid #993333;position: absolute;left: 70px;top: 64px;}
--></style></head><body>
<div class="lb_box">
<ul><li id="sz1" class="hover" onMouseOver="set('sz',1,4)">a</li>
<li id="sz2" onMouseOver="set('sz',2,4)">b</li>
<li id="sz3" onMouseOver="set('sz',3,4)">c</li>
<li id="sz4" onMouseOver="set('sz',4,4)">d</li>
</ul></div>
<div id="sz_1">11111111</div>
<div id="sz_2" style="display: none">222222222</div>
<div id="sz_3" style="display: none">333333333</div>
<div id="sz_4" style="display: none">444444444</div>
</body>
</style>
<script type="text/javascript">
function set(nm, cul, n) 
{for (i = 1; i <= 4; i++) 
{var meu = document.getElementById(nm + i);
var cod = document.getElementById(nm + "_" + i);
 meu.className = i == cul ? "hover" : "";
cod.style.display = i == cul ? "block" : "none";}}</script>
</html>

解决方案 »

  1.   

    var runing=false;
    function set(nm, cul, n) 
    {
    if(!runing){
         runing=true;
         setTimeout(
         function(){
         for (i = 1; i <= 4; i++) {
              var meu = document.getElementById(nm + i);
              var cod = document.getElementById(nm + "_" + i);
              meu.className = i == cul ? "hover" : "";
              cod.style.display = i == cul ? "block" : "none";
         }
         runing=false;
         },0.5);
    }}
      

  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>abcd</title>
    <style type="text/css">
    #l_Tab1{width: 520px;margin-right: auto;margin-left: auto;}
    .lb_box {width: 450px;height: 20px;float: left;display: inline;}
    .lb_box ul{list-style:none;height: 20px;width: 480px;float: left;}
    .lb_box li{float:left;cursor:pointer;width:50px;
    color:#FF0000;text-decoration: underline;height: 13px;text-align: center;font-size: 13px;margin-left: 12px;border: 1px solid #000000;}
    .lb_box li.hover{width:30px;color:#000000;font-weight: bold;font-size: 14px;text-decoration: none;height: 13px;}
    #sz_1,#sz_2,#sz_3,#sz_4{height: 77px;width: 250px;border: 1px solid #993333;position: absolute;left: 70px;top: 64px;}
    --></style></head><body>
    <div class="lb_box">
    <ul><li id="sz1" class="hover" onMouseOver="setTimeout(function(){set('sz',1,4)},500)">a</li>
    <li id="sz2" onMouseOver="setTimeout(function(){set('sz',2,4)},500)">b</li>
    <li id="sz3" onMouseOver="setTimeout(function(){set('sz',3,4)},500)">c</li>
    <li id="sz4" onMouseOver="setTimeout(function(){set('sz',4,4)},500)">d</li>
    </ul></div>
    <div id="sz_1">11111111</div>
    <div id="sz_2" style="display: none">222222222</div>
    <div id="sz_3" style="display: none">333333333</div>
    <div id="sz_4" style="display: none">444444444</div>
    </body>
    </style>
    <script type="text/javascript">
    function set(nm, cul, n) 
    {for (i = 1; i <= 4; i++) 
    {var meu = document.getElementById(nm + i);
    var cod = document.getElementById(nm + "_" + i);
     meu.className = i == cul ? "hover" : "";
    cod.style.display = i == cul ? "block" : "none";}}</script>
    </html>
      

  3.   

    让用JS一句概括不要HTML每处都加。
      

  4.   

    <!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>abcd</title>
    <style type="text/css">
    #l_Tab1{width: 520px;margin-right: auto;margin-left: auto;}
    .lb_box {width: 450px;height: 20px;float: left;display: inline;}
    .lb_box ul{list-style:none;height: 20px;width: 480px;float: left;}
    .lb_box li{float:left;cursor:pointer;width:50px;
    color:#FF0000;text-decoration: underline;height: 13px;text-align: center;font-size: 13px;margin-left: 12px;border: 1px solid #000000;}
    .lb_box li.hover{width:30px;color:#000000;font-weight: bold;font-size: 14px;text-decoration: none;height: 13px;}
    #sz_1,#sz_2,#sz_3,#sz_4{height: 77px;width: 250px;border: 1px solid #993333;position: absolute;left: 70px;top: 64px;}
    --></style></head><body>
    <div class="lb_box">
    <ul><li id="sz1" class="hover" onMouseOver="set('sz',1,4)">a</li>
    <li id="sz2" onMouseOver="set('sz',2,4)">b</li>
    <li id="sz3" onMouseOver="set('sz',3,4)">c</li>
    <li id="sz4" onMouseOver="set('sz',4,4)">d</li>
    </ul></div>
    <div id="sz_1">11111111</div>
    <div id="sz_2" style="display: none">222222222</div>
    <div id="sz_3" style="display: none">333333333</div>
    <div id="sz_4" style="display: none">444444444</div>
    </body>
    </style>
    <script type="text/javascript">
    function set(nm, cul, n) 
    {
    setTimeout(function(){for (i = 1; i <= 4; i++) 
    {var meu = document.getElementById(nm + i);
    var cod = document.getElementById(nm + "_" + i);
     meu.className = i == cul ? "hover" : "";
    cod.style.display = i == cul ? "block" : "none";}
    },500)
    }</script>
    </html>
      

  5.   

    <!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>abcd</title>
    <style type="text/css">
    #l_Tab1{width: 520px;margin-right: auto;margin-left: auto;}
    .lb_box {width: 450px;height: 20px;float: left;display: inline;}
    .lb_box ul{list-style:none;height: 20px;width: 480px;float: left;}
    .lb_box li{float:left;cursor:pointer;width:50px;
    color:#FF0000;text-decoration: underline;height: 13px;text-align: center;font-size: 13px;margin-left: 12px;border: 1px solid #000000;}
    .lb_box li.hover{width:30px;color:#000000;font-weight: bold;font-size: 14px;text-decoration: none;height: 13px;}
    #sz_1,#sz_2,#sz_3,#sz_4{height: 77px;width: 250px;border: 1px solid #993333;position: absolute;left: 70px;top: 64px;}
    --></style></head><body>
    <div class="lb_box">
    <ul><li id="sz1" class="hover" onMouseOver="set('sz',1,4)" onmouseout="clearTimeout(kk)">a</li>
    <li id="sz2" onMouseOver="set('sz',2,4)" onmouseout="clearTimeout(kk)">b</li>
    <li id="sz3" onMouseOver="set('sz',3,4)" onmouseout="clearTimeout(kk)">c</li>
    <li id="sz4" onMouseOver="set('sz',4,4)" onmouseout="clearTimeout(kk)">d</li>
    </ul></div>
    <div id="sz_1">11111111</div>
    <div id="sz_2" style="display: none">222222222</div>
    <div id="sz_3" style="display: none">333333333</div>
    <div id="sz_4" style="display: none">444444444</div>
    </body>
    </style>
    <script type="text/javascript">
    var kk;
    function set(nm, cul, n) 
    {
    kk = setTimeout(function(){for (i = 1; i <= 4; i++) 
    {var meu = document.getElementById(nm + i);
    var cod = document.getElementById(nm + "_" + i);
     meu.className = i == cul ? "hover" : "";
    cod.style.display = i == cul ? "block" : "none";}
    },500)
    }</script>
    </html>
      

  6.   

    比如我快速在0.5秒内划过a，就不触发
    而触发需要在上面停留0.5秒后在触发
    比如网易那些TAB的那些效果