关于显示隐藏二级目录的功能，用jQuery能够完全实现也可以。


<!DOCTYPE html>
<html>
<head><title>javascript test</title></head>
<body>
<div class="nav">
<ul>
<li>
<a href="#nav_1_1">microsoft</a>
<ol style="display:block;">
<li><a href="#nav_1_1">microsoft office</a></li>
<li><a href="#nav_1_2">microsoft ie9</a></li>
</ol>
</li>
<li>
<a href="#nav_2_1">google</a>
<ol>
<li><a href="#nav_2_1">google gmail</a></li>
<li><a href="#nav_2_2">google doc</a></li>
</ol>
</li>
<li>
<a href="#nav_3_1">apple</a>
<ol>
<li><a href="#nav_3_1">apple iwork</a></li>
<li><a href="#nav_3_2">apple mac os x</a></li>
</ol>
</li>
<li>
<a href="#nav_4_1">adobe</a>
<ol>
<li><a href="#nav_4_1">adobe print</a></li>
<li><a href="#nav_4_2">adobe design</a></li>
</ol>
</li>
</ul>
</div>
<div class="content">
<div id="nav_1_1" style="display:block;">microsoft office</div>
<div id="nav_1_2" >microsoft ie9</div>
<div id="nav_x_1" >xxx</div>
<div id="nav_x_2" >xxx</div>
<div id="nav_x_1" >xxx</div>
<div id="nav_x_2" >xxx</div>
<div id="nav_x_1" >xxx</div>
<div id="nav_x_2" >xxx</div>
<div id="nav_x_1" >xxx</div>
<div id="nav_x_2" >xxx</div>
</div>
</body>
</html>1 二级目录默认都是隐藏的（第一个除外），默认加载页面时只显示第一个一级目录的二级目录，<div class="content">区域默认页只显示第一个一级目录的二级目录第一条超链接的相关内容。
2 点击任意一个一级目录都只显示其二级目录内容，<div class="content">区域默认也只显示其二级目录第一条超链接的相关内容。
3 点击任意二级目录的超链接，<div class="content">都会显示其相关内容。以上功能用原生javascript或者jQuery实现都可以。

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head><title>javascript test</title>
    <script type="text/javascript">
    function clickMenu(menu) {
    var ul = menu.parentNode.parentNode;
    var lis = ul.childNodes;
    for (var i = 0; i < lis.length; i++) {
    lis[i].getElementsByTagName("OL")[0].style.display = "none";
    }
    menu.parentNode.getElementsByTagName("OL")[0].style.display = "";
    }
    </script>
    </head>
    <body>
    <div class="nav">
        <ul>
        <li>
            <a href="#nav_1_1" onclick="clickMenu(this)">microsoft</a>
            <ol style="display:block;">
            <li><a href="#nav_1_1">microsoft office</a></li>
            <li><a href="#nav_1_2">microsoft ie9</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_2_1" onclick="clickMenu(this)">google</a>
            <ol>
            <li><a href="#nav_2_1">google gmail</a></li>
            <li><a href="#nav_2_2">google doc</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_3_1" onclick="clickMenu(this)">apple</a>
            <ol>
            <li><a href="#nav_3_1">apple iwork</a></li>
            <li><a href="#nav_3_2">apple mac os x</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_4_1" onclick="clickMenu(this)">adobe</a>
            <ol>
            <li><a href="#nav_4_1">adobe print</a></li>
            <li><a href="#nav_4_2">adobe design</a></li>
            </ol>
        </li>
        </ul>
    </div>
    <div class="content">
        <div id="nav_1_1" style="display:block;">microsoft office</div>
        <div id="nav_1_2" >microsoft ie9</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
    </div>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html>
    <html>
    <head><title>javascript test</title>
    <script type="text/javascript">
    function clickMenu(menu) {
    var ul = menu.parentNode.parentNode;
    var lis = ul.childNodes;
    for (var i = 0; i < lis.length; i++) {
    if (!!lis[i] && lis[i].tagName == "LI") {
    lis[i].getElementsByTagName("OL")[0].style.display = "none";
    }
    }
    menu.parentNode.getElementsByTagName("OL")[0].style.display = "block";
    }
    </script>
    </head>
    <body>
    <div class="nav">
        <ul>
        <li>
            <a href="#nav_1_1" onclick="clickMenu(this)">microsoft</a>
            <ol>
            <li><a href="#nav_1_1">microsoft office</a></li>
            <li><a href="#nav_1_2">microsoft ie9</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_2_1" onclick="clickMenu(this)">google</a>
            <ol style="display:none;">
            <li><a href="#nav_2_1">google gmail</a></li>
            <li><a href="#nav_2_2">google doc</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_3_1" onclick="clickMenu(this)">apple</a>
            <ol style="display:none;">
            <li><a href="#nav_3_1">apple iwork</a></li>
            <li><a href="#nav_3_2">apple mac os x</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_4_1" onclick="clickMenu(this)">adobe</a>
            <ol style="display:none;">
            <li><a href="#nav_4_1">adobe print</a></li>
            <li><a href="#nav_4_2">adobe design</a></li>
            </ol>
        </li>
        </ul>
    </div>
    <div class="content">
        <div id="nav_1_1" style="display:block;">microsoft office</div>
        <div id="nav_1_2" >microsoft ie9</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
        <div id="nav_x_1" >xxx</div>
        <div id="nav_x_2" >xxx</div>
    </div>
    </body>
    </html>
      

  3.   

    楼主的说的是不是这样的效果？
    <!DOCTYPE html>
    <html>
    <head><title>javascript test</title>
     <script type="text/javascript" src="jq.js"></script>
        <script type="text/javascript"> window.onload=function(){
        document.getElementById('content').innerHTML=document.getElementsByTagName('ol')[0].getElementsByTagName('a')[0].innerHTML;
      
    }
            function clickMenu(menu) {            var ul = menu.parentNode.parentNode;
                var lis = ul.childNodes;
                for (var i = 0; i < lis.length; i++) {
                    if (!!lis[i] && lis[i].tagName == "LI") {
                        lis[i].getElementsByTagName("OL")[0].style.display = "none";
                    }
                }
                menu.parentNode.getElementsByTagName("OL")[0].style.display = "block";
     document.getElementById('content').innerHTML=menu.parentNode.getElementsByTagName("OL")[0].getElementsByTagName('a')[0].innerHTML;        }
    function show(obj){
    document.getElementById('content').innerHTML=obj.innerHTML;
    }
        </script>
    </head>
    <body>
    <div class="nav">
        <ul>
        <li>
            <a href="#nav_1_1" onclick="clickMenu(this)">microsoft</a>
            <ol>
            <li><a href="#nav_1_1" onclick="show(this)">microsoft office</a></li>
            <li><a href="#nav_1_2" onclick="show(this)">microsoft ie9</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_2_1" onclick="clickMenu(this)">google</a>
            <ol style="display:none;">
            <li><a href="#nav_2_1" onclick="show(this)">google gmail</a></li>
            <li><a href="#nav_2_2" onclick="show(this)">google doc</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_3_1" onclick="clickMenu(this)">apple</a>
            <ol style="display:none;">
            <li><a href="#nav_3_1" onclick="show(this)">apple iwork</a></li>
            <li><a href="#nav_3_2" onclick="show(this)">apple mac os x</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_4_1" onclick="clickMenu(this)">adobe</a>
            <ol style="display:none;">
            <li><a href="#nav_4_1" onclick="show(this)">adobe print</a></li>
            <li><a href="#nav_4_2" onclick="show(this)">adobe design</a></li>
            </ol>
        </li>
        </ul>
    </div>
    <div id="content">
    </div>
    </body>
    </html>
      

  4.   

    用纯JS写这个功能，代码还真不少，而且还要考虑兼容问题，页面结构不够清晰，所以推荐还是用JQUERY比较好！<!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><title>javascript test</title>
     <script type="text/javascript" src="jquery.min.1.4.2.js"></script>
        <script type="text/javascript">
        $(function(){  
           $(".content").html($(".nav a")[1].innerHTML);
        $(".nav ul li").each(function(){
      $(".nav ul li>a").click(function(e){
     
       //alert($(this).html());
    $(".nav ol").each(function(){$(this).hide();});
    $(this).siblings().show();
    return false;
    });
        $(".nav ul li ol a").each(function(){
        $(this).click(function(){
        $(".content").html($(this).html());
       });
     });
     });
         });
      </script>
    </head>
    <body>
    <div class="nav">
        <ul>
        <li>
            <a href="#nav_1_1">microsoft</a>
            <ol>
            <li><a href="#nav_1_1">microsoft office</a></li>
            <li><a href="#nav_1_2">microsoft ie9</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_2_1">google</a>
            <ol style="display:none;">
            <li><a href="#nav_2_1">google gmail</a></li>
            <li><a href="#nav_2_2">google doc</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_3_1">apple</a>
            <ol style="display:none;">
            <li><a href="#nav_3_1">apple iwork</a></li>
            <li><a href="#nav_3_2">apple mac os x</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_4_1">adobe</a>
            <ol style="display:none;">
            <li><a href="#nav_4_1">adobe print</a></li>
            <li><a href="#nav_4_2">adobe design</a></li>
            </ol>
        </li>
        </ul>
    </div>
    <div class="content">
    </div>
    </body>
    </html>
      

  5.   

    这样也可以
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <title> new document </title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script type="text/javascript" src="js/jq.js"></script>
    <style type="text/css">
    .nav ol{display:none;}
    .content div{display:none;}
    </style>
    <script type="text/javascript">
    <!--
    var QieHuang = function (obj,className){
    var objOl = obj.next()[0] if (this.oldObj!=undefined){
    this.oldObj.style.display = "none";
    }
    else{
    $(".nav > ul > li > ol:first").css("display","none");
    } this.oldObj = objOl;
    objOl.style.display = "block"; obj.next().find("a:eq(0)").trigger("click")
    } var QieHuang2 = function (obj){
    var objContent = $(obj.attr("href"))[0]; if (this.oldContent!=undefined){
    this.oldContent.style.display = "none";
    }
    else{
    $(".content > div:first").css("display","none");
    } this.oldContent = objContent
    objContent.style.display = "block";
    } $(document).ready(function(){
    $(".nav > ul > li > ol > li > a").bind("click",function(){QieHuang2($(this))});
    $(".nav > ul > li > a").bind("click",function(){QieHuang($(this))})
    });
    //-->
    </script>
    </head> <body>
    <div class="nav">
        <ul>
        <li>
            <a href="#nav_1_1">microsoft</a>
            <ol style="display:block;">
            <li><a href="#nav_1_1">microsoft office</a></li>
            <li><a href="#nav_1_2">microsoft ie9</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_2_1">google</a>
            <ol>
            <li><a href="#nav_2_1">google gmail</a></li>
            <li><a href="#nav_2_2">google doc</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_3_1">apple</a>
            <ol>
            <li><a href="#nav_3_1">apple iwork</a></li>
            <li><a href="#nav_3_2">apple mac os x</a></li>
            </ol>
        </li>
        <li>
            <a href="#nav_4_1">adobe</a>
            <ol>
            <li><a href="#nav_4_1">adobe print</a></li>
            <li><a href="#nav_4_2">adobe design</a></li>
            </ol>
        </li>
        </ul>
    </div>
    <div class="content">
        <div id="nav_1_1" style="display:block;">microsoft office</div>
        <div id="nav_1_2" >microsoft ie9</div>
        <div id="nav_2_1" >google gmail</div>
        <div id="nav_2_2" >google doc</div>
        <div id="nav_3_1" >apple iwork</div>
        <div id="nav_3_2" >apple mac os x</div>
        <div id="nav_4_1" >adobe print</div>
        <div id="nav_4_2" >adobe design</div>
        <div id="nav_5_1" >xxx</div>
        <div id="nav_5_2" >xxx</div>
    </div>
    </
    </body>
    </html>