JavaScript - 高级树形菜单实例

简单的树形菜单


<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>

高级树形菜单


<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>

你可能感兴趣的:(JavaScript实例库)