<!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>
<link href="css/nav.css" rel="stylesheet" type="text/css"/>
</head>
<script type="text/javascript">
window.onload = function() {
    for( i=1; i<9; i++ ){
        var nodeItem = document.getElementById("item"+i);    //遍历每个菜单项增加onClick事件
        
        nodeItem.onclick = function() {
            
            /*菜单激活动态样式*/
            for( n=0; n<9; n++){
                document.getElementsByTagName("li")[n].className = "";
                //alert(this.className);
            }
            this.className = "active";
            
            var linkNode = parseInt( this.id.substring(4,5) );    
            for ( j=1; j<10; j++){        //按顺序匹配菜单项和菜单内容
                var nodeSubItem = document.getElementById("sub-item"+j);
                
                if ( linkNode == j ){    //如果菜单项和菜单内容匹配则显示,否则隐藏
                    nodeSubItem.style.display = "block";
                }else{
                    nodeSubItem.style.display = "none";
                }
            }
        }
    }
}
</script>
<body><div id="menu">
    <div id="top">
        <ul id="item">
            <li id="item1" class="active"><a href="#"><span>首页</span></a></li>
            <li id="item2" class="a"><a href="#"><span>宝推广</span></a></li>
            <li id="item3"><a href="#"><span>我要收款</span></a></li>
            <li id="item4"><a href="#"><span>我要付款</span></a></li>
            <li id="item5"><a href="#"><span>我的宝</span></a></li>
            <li id="item6"><a href="#"><span>交易管理</span></a></li>
            <li id="item7"><a href="#"><span>商户服务</span></a></li>  
             <li id="item8" class="no"><a href="#"><span>帮助中心</span></a></li>  
            <li class="ext1"></li>
        </ul>
    </div>
    <div id="bot">
        <ul class="sub-item" id="sub-item1">
            <li class="ext2"></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            
        </ul>
        <ul class="sub-item" id="sub-item2">
            <li class="ext2"></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            
        </ul>
        <ul class="sub-item" id="sub-item3">
            <li class="ext2"></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
            <li><a href="#"><span>我要提现</span></a></li>
           
        </ul>
    </div>    
</div></body>
</html>

解决方案 »

  1.   

    没有sub-item4、sub-item5、sub-item6、sub-item7、sub-item8、sub-item9加上即可
    <!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>
    <link href="css/nav.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    .sub-item{display:none}
    </style>
    </head>
    <script type="text/javascript">
    window.onload = function() {
        for( i=1; i<9; i++ ){
            var nodeItem = document.getElementById("item"+i);    //遍历每个菜单项增加onClick事件
            
            nodeItem.onclick = function() {
                
                /*菜单激活动态样式*/
                for( n=0; n<9; n++){
                    document.getElementsByTagName("li")[n].className = "";
                    //alert(this.className);
                }
                this.className = "active";
                
                var linkNode = parseInt( this.id.substring(4,5) );    
                for ( j=1; j<10; j++){        //按顺序匹配菜单项和菜单内容
                    var nodeSubItem = document.getElementById("sub-item"+j);
                    
                    if ( linkNode == j ){    //如果菜单项和菜单内容匹配则显示,否则隐藏
                        nodeSubItem.style.display = "block";
                    }else{
                        nodeSubItem.style.display = "none";
                    }
                }
            }
        }
    }
    </script>
    <body><div id="menu">
        <div id="top">
            <ul id="item">
                <li id="item1" class="active"><a href="#"><span>首页</span></a></li>
                <li id="item2" class="a"><a href="#"><span>宝推广</span></a></li>
                <li id="item3"><a href="#"><span>我要收款</span></a></li>
                <li id="item4"><a href="#"><span>我要付款</span></a></li>
                <li id="item5"><a href="#"><span>我的宝</span></a></li>
                <li id="item6"><a href="#"><span>交易管理</span></a></li>
                <li id="item7"><a href="#"><span>商户服务</span></a></li>  
                 <li id="item8" class="no"><a href="#"><span>帮助中心</span></a></li>  
                <li class="ext1"></li>
            </ul>
        </div>
        <div id="bot">
            <ul class="sub-item" id="sub-item1">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item2">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item3">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
               
            </ul>
            <ul class="sub-item" id="sub-item4">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item5">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item6">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
               
            </ul>
            <ul class="sub-item" id="sub-item7">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item8">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                
            </ul>
            <ul class="sub-item" id="sub-item9">
                <li class="ext2"></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
                <li><a href="#"><span>我要提现</span></a></li>
               
            </ul>
        </div>    
    </div></body>
    </html>
      

  2.   

    非常简单,你先写一个检测韩式,看看这个对象是否存在就可以了,具体修改如下
    for ( j=1; j<10; j++){        //按顺序匹配菜单项和菜单内容
                    var nodeSubItem = document.getElementById("sub-item"+j);
                    if(nodeSubItem)
                    {
                      if ( linkNode == j ){    //如果菜单项和菜单内容匹配则显示,否则隐藏
                        nodeSubItem.style.display = "block";
                      }else{
                        nodeSubItem.style.display = "none";
                      }
                    }
                }
      

  3.   

    to 2楼:对方提出了问题,就是因为不懂哎,自己试试就可以了,lz提供了所有的代码了。to 3楼:你很强悍的说。但是,你的这个解决方式……治标不治本哎
      

  4.   

    用firefox,可以养成良好的代码习惯............