JS 事件处理提问!

描述:
容器一
<div id="1" class="style" onClick="onClick(this.id)" onMouseOver="onMouseOver(this.id)" 
onMouseOut="onMouseOut()">导航一</div>
<div id="2" class="style" onClick="onClick(this.id)" onMouseOver="onMouseOver(this.id)" 
onMouseOut="onMouseOut()">导航二</div>在鼠标点击导航一的时候容器二将显示子导航;
在鼠标移到导航二的时候容器二将显示自导航;
在鼠标离开导航二的时候容器二将显示导航一的子导航(点击的哪个就在显示哪个);代码:function onClick(x){
document.getElementById("z"+x).innerHTML="导航"+x;
}
function onMouseOver(x){
document.getElementById("z"+x).innerHTML="改变导航"+x;
}
function onMouseOut(){

}
提问:
onMouseOut="onMouseOut()"事件如何写?

解决方案 »

  1.   

    跟onmouseover类似的嘛
    onMouseOut="onMouseOut(this.id)"function onMouseOut(x){
        document.getElementById("z"+x).innerHTML="";
    }
      

  2.   

    onMouseOut="onMouseOut()" function onMouseOut(){ 
        document.getElementById("z1").innerHTML="改变导航1"; 
    } 
      

  3.   

    <html>
    <head>
    <title>菜单</title>
    <style type="text/css">
    body{ font-size : 12px ;}
    ul{ margin : 0 ; padding : 0 ;}
    li{ display : inline ;}
    .menu{ border : 1px solid red ; margin : 3px 0 ;}
    .layer1,.layer2,.layer3,.layer4{ height : 100px ; width : 400px ;  color : white ; margin : 5px ; display : none ;}
    .layer1{ background-color : red ; display : block ;}
    .layer2{ background-color : blue;}
    .layer3{ background-color : green;}
    .layer4{ background-color : black;}
    </style>
    <script language="javascript" type="text/javascript">
    function $(tid)
    {
       return document.getElementById(tid);
    }
    function init()
    {
       var a, l;
       a = $("menu").getElementsByTagName("a");
       l = a.length;
       for(var i = 0; i < l ; i ++ )
       {      a[i].onmouseover = function(i)
          {
             return function()
             {
                shows(i);
             }
          }
          (i);
          
       }
    }
    function shows(c)
    {
       var _a, _l;
       _a = $('main').childNodes;
       _l = _a.length;
       for(var n = 0; n < _l ; n ++ )
       {
          if(n == c)
          {
             _a[n].style.display = "block" ;      }
          else
          {
             _a[n].style.display = "none";
          }
       }}
    window.onload = init;
    </script>
    </head>
    <body >
    <div class="menu" id="menu"><ul>
    <li><a href="#">aaa</a></li>
    <li><a href="#">bbb</a></li>
    <li><a href="#">ccc</a></li>
    <li><a href="#">ddd</a></li>
    </ul></div>
    <div id="main">
    <div class="layer1">aaaaaaaaaaaa</div>
    <div class="layer2">bbbbbbbbbbbb</div>
    <div class="layer3">cccccccccccc</div>
    <div class="layer4">dddddddddddd</div>
    </div>
    </body>
    </html>
      

  4.   

    抱歉 还是没有实现我说的效果!在FF下无法应用 IE下鼠标移动到其他导航是可以改变内容 但移开之后无法显示先前点击过的内容寻求思路:
    不知使用隐藏DIV记录单击后出现的二级导航是否可行?可有其他技术可实现?