左边导航

 <style type="text/css">
        a{text-decoration: none;}
        #a{ background-color: #5DFD43;cursor: hand;}
    </style>
    <script type="text/javascript">
        function show(obj) {
            for (var i = 1; i <= 3; i++) {
                document.getElementById("aa" + i).style.display = "none";
            }
            document.getElementById(obj).style.display = "inline";
        }
    </script>

--------------------------------------------------------

<div style="background-color: #3FF; width: 100px; padding-left:10px;">
        <div>
            <div οnclick="show('aa1')" id="a">AAA</div>
            <div style="display: none;" id="aa1">
                <br /><a href="#">a</a>
                <br /><a href="#">aaa</a>
                <br /><a href="#">aaaaa</a>
            </div>
        </div>
        <div>
            <div οnclick="show('aa2')" id="a">BBB</div>
            <div style="display: none;" id="aa2">
                <br /><a href="#">B</a>
                <br /><a href="#">BBB</a>
                <br /><a href="#">BBBBB</a>
            </div>
        </div>
        <div>
            <div οnclick="show('aa3')" id="a">CCC</div>
            <div style="display: none;" id="aa3">
                <br /><a href="#">C</a>
                <br /><a href="#">CCC</a>
                <br /><a href="#">CCCCC</a>
            </div>
        </div>
    </div>

转载于:https://www.cnblogs.com/dotnetlina/archive/2011/10/18/2216932.html