怎么把这段onmouseover事件代码简写啊?

/*
menuList[1].onmouseover = function(){
tabChange(1);
}
menuList[2].onmouseover = function(){
tabChange(2);
}
menuList[3].onmouseover = function(){
tabChange(3);
}
menuList[4].onmouseover = function(){
tabChange(4);
}
menuList[5].onmouseover = function(){
tabChange(5);
}
menuList[6].onmouseover = function(){
tabChange(6);
} */
怎么把红色部分简写啊?
menuList[i].onmouseover = function(){
var ddd = 0,1,2,3,4,5,6;
var eee = menuList[i].indexOf(ddd)
tabChange(eee);
}
蓝色部分是我写的.不起作用的
<!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>
<style type="text/css">
* {
    padding:0;
    margin:0;
    font-size:12px;
}
ul{list-style:none outside none;}
.menu{
width:766px;
margin:55px auto;
border:1px solid #000;
overflow:hidden;
}
#tabMenu{
height:35px;
width:770px;
}
#tabMenu li{
float:left;
background:#3366ff;
line-height:35px;
width:109px;
margin-right:1px;
text-align:center;
color:#fff;
}
#tabMenu li a{
color:#fff;
}
.tabContent{
width:763px;
position:relative;
height:200px;
}
.tabContent ul{
width:109px;
position:absolute;
top:0px;
left:0;
background:#91adff;
overflow:hidden;
}
.tabContent ul li{
width:109px;
height:25px;
line-height:25px;
padding-left:10px;
border-top:1px solid #fff;
overflow:hidden;
}
.tabContent ul li a{
display:block;
height:25px;
background:url(list.gif) 90% center no-repeat;
color:#fff;
}
#tabMenu .bgcolor a{
background:#91adff;
color:#fff;
font-weight:bold;
display:block;
height:35px;
}
.displayElem{
display:block;
}
.hidden{
display:none;
}
.tabContent .widths{
width:106px;
}
.tabContent .widths li{
width:106px;
}
.tabContent .widths li a{
background:url(list.gif) 90% center no-repeat;
}
</style><script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu");
var tabContent = tabMenu.getElementsByTagName("li");
for(var i=0; i<tabContent.length; i++){
if(i == num){
document.getElementById("con_"+i).className = "displayElem";
tabContent[i].className="bgcolor";
document.getElementById("con_"+i).style.left = num*110+"px";
if(num == 6){
document.getElementById("con_"+i).className = "widths";
}
}
else{
tabContent[i].className="";
document.getElementById("con_"+i).className = "hidden";
document.getElementById("con_"+i).style.left = "";
}
}
}
function hovers(){
var menu =  document.getElementById("tabMenu");
var menuList = menu.getElementsByTagName("li");
for(var i=0; i<menuList.length; i++){
menuList[i].onmouseover = function(){
var ddd = 0,1,2,3,4,5,6;
var eee = menuList[i].indexOf(ddd)
tabChange(eee);
}
/*
menuList[1].onmouseover = function(){
tabChange(1);
}
menuList[2].onmouseover = function(){
tabChange(2);
}
menuList[3].onmouseover = function(){
tabChange(3);
}
menuList[4].onmouseover = function(){
tabChange(4);
}
menuList[5].onmouseover = function(){
tabChange(5);
}
menuList[6].onmouseover = function(){
tabChange(6);
} */
}
}
window.onload = hovers;
</script>
</head>
<body>
<div class="menu">
<div id="tabMenu">
<ul>
<li class="bgcolor"><a href="#">新闻</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">聊天</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">购物</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div> <div class="tabContent" id="content">
<ul id="con_0">
<li><a href="#">网易新闻</a></li>
<li><a href="#">腾讯新闻</a></li>
<li><a href="#">凤凰新闻</a></li>
</ul>
<ul class="hidden" id="con_1">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">小游戏</a></li>
</ul>
<ul class="hidden" id="con_2">
<li><a href="#">QQ即时通</a></li>
<li><a href="#">msn即时通</a></li>
<li><a href="#">泡泡即时通</a></li>
</ul>
<ul class="hidden" id="con_3">
<li><a href="#">在线试听</a></li>
<li><a href="#">下载歌词</a></li>
<li><a href="#">DJ舞曲</a></li>
</ul>
<ul class="hidden" id="con_4">
<li><a href="#">暂无!</a></li>
<li><a href="#">暂无!</a></li>
<li><a href="#">暂无!</a></li>
</ul>
<ul class="hidden" id="con_5">
<li><a href="#">淘宝网</a></li>
<li><a href="#">拍拍网</a></li>
<li><a href="#">百度有阿</a></li>
</ul>
<ul class="hidden" id="con_6">
<li><a href="#">天涯论坛</a></li>
<li><a href="#">猫扑论坛</a></li>
<li><a href="#">凤凰论坛</a></li>
</ul>
</div> <div id="menu3">
<ul>
<li><a href=""></a></li>
</ul>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    for(var x=1;x<7;x++)
    {
    eval('menuList['+x+'].onmouseover = function(){tabChange('+x+')')
    }
      

  2.   


    var ddd = 0,1,2,3,4,5,6;
    var ary = ddd.split(",");
    for(var i=0; i<menuList.length; i++){
                menuList[i].onmouseover = function(){
                    
                    var eee = menuList[i].id.indexOf(ary[i+1])
                    tabChange(eee);
                }
    }
      

  3.   

      var eee = menuList[i].id.indexOf(ary[i+1])
    ary[i+1] // 这个数组怎么计算的.i+1是什么概念啊?
      

  4.   

    for(var i=1; i<9; i++){
      menuList[i].onmouseover = function(){
        tabChange(i);
      }
    }
      

  5.   

    你的这个方法行不通啊?我把代码放到 hover()函数里啊
      

  6.   

    for(var i=0; i<menuList.length; i++){
       menuList[i].attachEvent("onmouseover",tabChange);
    }
      

  7.   

    接上:
    function tabChange()
    {
    var src=window.event.srcElement;
    //自己代码
    }
      

  8.   


    function hovers(){
            var menu =  document.getElementById("tabMenu");
            var menuList = menu.getElementsByTagName("li");
            for(var i=0; i<menuList.length; i++){
                menuList[i].onmouseover = function(){
                     tabChange(i);
                }
      

  9.   

    menuList[i].attachEvent("onmouseover",tabChange);
      

  10.   

    for(var i=0;i<=6;i++)
    {
      (function(m){
         menuList[m].onmouseover=function(){tabChange(m);}  
      })(i);
    }
      

  11.   

    也可以这样：
    for(var i=0;i<=6;i++)
    {
      menuList[i].tab=i;
      menuList[i].onmouseover=function(){tabChange(this.tab);}
    }
      

  12.   

    <!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>
    <style type="text/css">
    * {
        padding:0;
        margin:0;
        font-size:12px;
    }
    ul{list-style:none outside none;}
    .menu{
        width:766px;
        margin:55px auto;
        border:1px solid #000;
        overflow:hidden;
    }
    #tabMenu{
        height:35px;
        width:770px;
    }
    #tabMenu li{
        float:left;
        background:#3366ff;
        line-height:35px;
        width:109px;
        margin-right:1px;
        text-align:center;
        color:#fff;
    }
    #tabMenu li a{
        color:#fff;
    }
    .tabContent{
        width:763px;
        position:relative;
        height:200px;
    }
    .tabContent ul{
        width:109px;
        position:absolute;
        top:0px;
        left:0;
        background:#91adff;
        overflow:hidden;
    }
    .tabContent ul li{
        width:109px;    
        height:25px;
        line-height:25px;
        padding-left:10px;
        border-top:1px solid #fff;
        overflow:hidden;
    }
    .tabContent ul li a{
        display:block;
        height:25px;
        background:url(list.gif) 90% center no-repeat;
        color:#fff;
    }
    #tabMenu .bgcolor a{
        background:#91adff;
        color:#fff;
        font-weight:bold;
        display:block;
        height:35px;
    }
    .displayElem{
        display:block;
    }
    .hidden{
        display:none;
    }
    .tabContent .widths{
        width:106px;    
    }
    .tabContent .widths li{
        width:106px;
    }
    .tabContent .widths li a{
        background:url(list.gif) 90% center no-repeat;    
    }
    </style><script type="text/javascript">
        function tabChange(num){
            var tabMenu = document.getElementById("tabMenu");
            var tabContent = tabMenu.getElementsByTagName("li");
            for(var i=0; i<tabContent.length; i++){
                if(i == num){
                    document.getElementById("con_"+i).className = "displayElem";
                    tabContent[i].className="bgcolor";
                    document.getElementById("con_"+i).style.left = num*110+"px";
                    if(num == 6){
                        document.getElementById("con_"+i).className = "widths";
                    }
                }
                else{
                    tabContent[i].className="";
                    document.getElementById("con_"+i).className = "hidden";
                    document.getElementById("con_"+i).style.left = "";                
                }
            }
        }
    function delegate(fn,params,obj){ //定义一个函数代理
    return function(){
    fn.apply(obj || window,params);
    }
    }
    //一般这种循环绑定事件的问题，本质上都是采用“包多一层”的方法来解决
        function hovers(){
            var menu =  document.getElementById("tabMenu");
            var menuList = menu.getElementsByTagName("li");
            
              for(var i=0; i<menuList.length; i++){
                menuList[i].onmouseover = delegate(tabChange,[i],menuList[i]);
                /*
                menuList[1].onmouseover = function(){
                    tabChange(1);
                }
                menuList[2].onmouseover = function(){
                    tabChange(2);
                }
                menuList[3].onmouseover = function(){
                    tabChange(3);
                }
                menuList[4].onmouseover = function(){
                    tabChange(4);
                }
                menuList[5].onmouseover = function(){
                    tabChange(5);
                }
                menuList[6].onmouseover = function(){
                    tabChange(6);
                }    */        
            }
        }
    window.onload = hovers;
    </script>
    </head>
    <body>
        <div class="menu">
            <div id="tabMenu">
                <ul>
                    <li class="bgcolor"><a href="#">新闻</a></li>
                    <li><a href="#">游戏</a></li>
                    <li><a href="#">聊天</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">论坛</a></li>                
                </ul>
            </div>        <div class="tabContent" id="content">
                <ul id="con_0">
                    <li><a href="#">网易新闻</a></li>
                    <li><a href="#">腾讯新闻</a></li>
                    <li><a href="#">凤凰新闻</a></li>
                </ul>
                <ul class="hidden" id="con_1">
                    <li><a href="#">网络游戏</a></li>
                    <li><a href="#">单机游戏</a></li>
                    <li><a href="#">小游戏</a></li>
                </ul>
                <ul class="hidden" id="con_2">
                    <li><a href="#">QQ即时通</a></li>
                    <li><a href="#">msn即时通</a></li>
                    <li><a href="#">泡泡即时通</a></li>
                </ul>
                <ul class="hidden" id="con_3">
                    <li><a href="#">在线试听</a></li>
                    <li><a href="#">下载歌词</a></li>
                    <li><a href="#">DJ舞曲</a></li>
                </ul>
                <ul class="hidden" id="con_4">
                    <li><a href="#">暂无!</a></li>
                    <li><a href="#">暂无!</a></li>
                    <li><a href="#">暂无!</a></li>
                </ul>
                <ul class="hidden" id="con_5">
                    <li><a href="#">淘宝网</a></li>
                    <li><a href="#">拍拍网</a></li>
                    <li><a href="#">百度有阿</a></li>
                </ul>
                <ul class="hidden" id="con_6">
                    <li><a href="#">天涯论坛</a></li>
                    <li><a href="#">猫扑论坛</a></li>
                    <li><a href="#">凤凰论坛</a></li>
                </ul>
            </div>        <div id="menu3">
                <ul>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>我将就地把代码改了一下，在搜狗浏览器上看到了效果！
    下面是一个参考链接：
    http://blog.guitarbean.com/2008/04/javascript-add-cycle-events-good-closure-terrible.html