JavaScript - 高级树形菜单实例

浏览数：17 / 时间：2015年06月08日

简单的树形菜单

<!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=UTF-8">
<title>简单的树形菜单</title>
<style type="text/css">
    ul{
        list-style:none;
        font-size:12px;
        display:none;
    }
    a{
        text-decoration:none;
        font-size:13px;
        color:#666;
    }
    a:hover{
        color:#ff7300;
    }


</style>

    <script type="text/javascript">
        function showList(){
            if($("game").style.display=="none"){
                $("game").style.display="block";
            }else{
                $("game").style.display="none";
            }
        }


        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <p><a href="javascript:showList();"><img src="images/fclose.gif"/>热门网游</a></p>
    <ul id="game">
        <li><img src="images/doc.gif" />英雄联盟</li>
        <li><img src="images/doc.gif" />魔兽世界</li>
        <li><img src="images/doc.gif" />节奏大师</li>
        <li><img src="images/doc.gif" />天天酷跑</li>
    </ul>
</body>
</html>

高级树形菜单

<!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=UTF-8">
<title>高级树形菜单</title>
        <style type="text/css">
            ol{
                display: none;
            }
            a:hover{
                color:#ff7730;
            }
        </style>
<script type="text/javascript">

            function showList1(){
                if($("first").style.display=="none"){
                    $("first").style.display="block";
                    $("second").style.display="none";
                    $("third").style.display="none";
                    $("fouth").style.display="none";
                }else{
                    $("first").style.display="none";
                    $("second").style.display="none";
                    $("third").style.display="none";
                    $("fouth").style.display="none";
                }
            }
            function showList2(){
                if($("second").style.display=="none"){
                    $("second").style.display="block";
                    $("first").style.display="none";
                    $("third").style.display="none";
                    $("fouth").style.display="none";
                }else{
                    $("second").style.display="none";
                    $("first").style.display="none";
                    $("third").style.display="none";
                    $("fouth").style.display="none";
                }
            }
            function showList3(){
                if($("third").style.display=="none"){
                    $("third").style.display="block";
                    $("first").style.display="none";
                    $("second").style.display="none";
                    $("fouth").style.display="none";
                }else{
                    $("third").style.display="none";
                    $("first").style.display="none";
                    $("second").style.display="none";
                    $("fouth").style.display="none";
                }
            }
            function showList4(){
                if($("fouth").style.display=="none"){
                    $("fouth").style.display="block";
                    $("first").style.display="none";
                    $("second").style.display="none";
                    $("third").style.display="none";
                }else{
                    $("fouth").style.display="none";
                    $("first").style.display="none";
                    $("second").style.display="none";
                    $("third").style.display="none";
                }
            }

            function $(id){
                return document.getElementById(id);
            }
</script>
</head>
<body>
    <p><a href="javascript:showList1();"><img src="images/fclose.gif"/>注册认证</a></p>
    <ol id="first">
        <li><img src="images/doc.gif" />注册激活</li>
        <li><img src="images/doc.gif" />安全认证</li>
        <li><img src="images/doc.gif" />支付宝认证</li>
    </ol>
        <p><a href="javascript:showList2();"><img src="images/fclose.gif"/>买家帮助</a></p>
    <ol id="second">
        <li><img src="images/doc.gif" />买家管理</li>
        <li><img src="images/doc.gif" />买家注册</li>
        <li><img src="images/doc.gif" />买家评价</li>
        <li><img src="images/doc.gif" />买家退货</li>
    </ol>
        <p><a href="javascript:showList3();"><img src="images/fclose.gif"/>卖家帮助</a></p>
    <ol id="third">
        <li><img src="images/doc.gif" />店铺设置</li>
        <li><img src="images/doc.gif" />店铺装修</li>
        <li><img src="images/doc.gif" />店铺发货</li>
        <li><img src="images/doc.gif" />店铺入库</li>
    </ol>
        <p><a href="javascript:showList4();"><img src="images/fclose.gif"/>个人资料修改</a></p>
    <ol id="fouth">
        <li><img src="images/doc.gif" />修改密码</li>
        <li><img src="images/doc.gif" />修改图像</li>
        <li><img src="images/doc.gif" />修改手机号码</li>
        <li><img src="images/doc.gif" />修改信息</li>
    </ol>
</body>
</html>