求一JS效果


    <ul id="hdNav">
        <li class="mi01"><a class="fnav" href="#"><span>首页</span></a></li>
        
        <li class="mi02"><a class="fnav" href="#"><span>商品</span></a></li>
        
        <li class="mi03"><a class="fnav" href="#"><span>商品1</span></a>
            <div class="navp">a</div>
        </li>
        
        <li class="mi04"><a class="fnav" href="#"><span>商品2</span></a>
            <div class="navp">b</div>
          </li>
        
        <li class="mi05"><a class="fnav" href="#"><span>商品3</span></a>
            <div class="navp">c</div>
          </li>
        
        <li class="mi06"><a class="fnav" href="#"><span>商品4</span></a>
            <div class="navp">d</div>
          </li>
        
        <li class="mi07"><a class="fnav" href="#"><span>商品5</span></a>
            <div class="navp">e</div>
          </li>
        
        <li class="mi08"><a class="fnav" href="#"><span>商品6</span></a></li>
        
        <li class="mi09"><a class="fnav" href="#"><span>商品7</span></a></li>
    </ul>    var oElements = document.getElementById("hdNav").getElementsByTagName("li");
    for(var i=0;i<oElements.length;i++)
    {
        oElements[i].onmouseover=function()
        {............ }
    }
想实现的效果鼠标放在LI上面的时候
如果LI下面有DIV标签，则显示DIV里的内容

解决方案 »

  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=utf-8" />
    <title>无标题文档</title>
    <style>
    .navp{display:none;}
    </style>
    </head><body>
    <ul id="hdNav">
            <li class="mi01"><a class="fnav" href="#"><span>首页</span></a></li>
            
            <li class="mi02"><a class="fnav" href="#"><span>商品</span></a></li>
            
            <li class="mi03"><a class="fnav" href="#"><span>商品1</span></a>
                <div class="navp">a</div>
            </li>
            
            <li class="mi04"><a class="fnav" href="#"><span>商品2</span></a>
                <div class="navp">b</div>
              </li>
            
            <li class="mi05"><a class="fnav" href="#"><span>商品3</span></a>
                <div class="navp">c</div>
              </li>
            
            <li class="mi06"><a class="fnav" href="#"><span>商品4</span></a>
                <div class="navp">d</div>
              </li>
            
            <li class="mi07"><a class="fnav" href="#"><span>商品5</span></a>
                <div class="navp">e</div>
              </li>
            
            <li class="mi08"><a class="fnav" href="#"><span>商品6</span></a></li>
            
            <li class="mi09"><a class="fnav" href="#"><span>商品7</span></a></li>
        </ul>
    <script>
         var oElements = document.getElementById("hdNav").getElementsByTagName("li");
        for(var i=0;i<oElements.length;i++)
        {
    !function(i){
            oElements[i].onmouseover=function(){
    var div = this.getElementsByTagName('div')[0];
    if(div){
    div.style.display = 'block'
    }
    }
    }(i)
        }
        </script>
    </body>
    </html>