zoukankan      html  css  js  c++  java
  • python : HTML+CSS (左侧菜单)

    左侧菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
        <style>
           .hide{
                display: none;
            }
            .menu .head{
                height:38px;
                background-color: #2459a2;
                line-height: 38px;
            }
        </style>
    </head>
    <body>
    <div style="height: 48px ;border: 1px solid red"></div>
    <div style="300px ;border: 1px solid red ">
        <div class="menu">
               <div id='a1' class="head "  onclick="caidan('a1')">菜单1</div>
               <div class="conent">
                    <div clas="item">内容1</div>
                    <div clas="item">内容1</div>
                    <div clas="item">内容1</div>
               </div>
        </div>
    
        <div class="menu">
               <div id='a2' class="head "   onclick="caidan('a2')">菜单2</div>
               <div class="conent hide">
                    <div clas="item">内容2</div>
                    <div clas="item">内容2</div>
                    <div clas="item">内容2</div>
               </div>
        </div>
    
        <div class="menu">
               <div  id='a3' class="head"   onclick="caidan('a3')">菜单3</div>
               <div class="conent hide">
                    <div clas="item">内容3</div>
                    <div clas="item">内容3</div>
                    <div clas="item">内容3</div>
               </div>
        </div>
    
        <div class="menu">
               <div id='a4' class="head"  onclick="caidan('a4')">菜单4</div>
               <div class="conent  hide">
                    <div clas="item">内容4</div>
                    <div clas="item">内容4</div>
                    <div clas="item">内容4</div>
               </div>
        </div>
    
    </div>
    <script>
    
        function caidan(nod) {
            var head=document.getElementById(nod);
            curr_meu=head.parentElement.parentElement.children;
            for (var i=0; i<curr_meu.length; i++){
                var item_list=curr_meu[i];
                item_list.children[1].classList.add('hide');
            }
            head.nextElementSibling.classList.remove('hide')
        }
    </script>
    </body>
    </html>
    左侧菜单
  • 相关阅读:
    demo_38 关注页导航栏实现
    demo_37 评论列表实现_02 封装popup 及 格式化时间
    demo_37 评论列表实现_01
    SaaS
    rsyncd脚本
    rsyncd
    MySQL高可用--MHA安装
    正向代理
    zabbix 一键部署
    kvm安装
  • 原文地址:https://www.cnblogs.com/xuehuahongmei/p/6076062.html
Copyright © 2011-2022 走看看