zoukankan      html  css  js  c++  java
  • day16--js之后台管理左侧菜单优化

    1、对15周的后台管理左侧菜单进行了优化:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
            display:none;
            }
            .item .header{
            height:35px;
            background-color:blue;
            color:white;
            line-height:40px;
            }
        </style>
    </head>
    <body>
        <div style="height:48px"></div>
        <div style="50px">
            <div class="item">
                <div class="header" onclick="ChangeMenu(this);">菜单1</div>   //去调id标签,参数由i1改为this
                <div class="content">
                    <div>内容1</div>
                    <div>内容1</div>
                    <div>内容1</div>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="ChangeMenu(this);">菜单2</div>
                <div class="content hide">
                    <div>内容2</div>
                    <div>内容2</div>
                    <div>内容2</div>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="ChangeMenu(this);">菜单3</div>
                <div class="content hide">
                    <div>内容3</div>
                    <div>内容3</div>
                    <div>内容3</div>
                </div>
            </div>
        </div>
        <script>
            function ChangeMenu(ths){   //将nid参数改为 ths
                //this 全局对象
                current_header=ths;  //将此处的代码由var current_header=document.getElementById(nid);改为现有代码
                var item_list=current_header.parentElement.parentElement.children;  // 找到所有的item标签
                for(var i=0;i<item_list.length;i++){
                    var current_item=item_list[i];  // 获取所有的item标签
                    current_item.children[1].classList.add('hide');  //找到所有item标签下的第二个孩子标签,即content标签,将hide添加
                }
                current_header.nextElementSibling.classList.remove('hide');  //找到当前header的下一个兄弟标签,将其移除,使其样式显示
            }
        </script>
    </body>
  • 相关阅读:
    MySql数据库水平扩展过程
    (转)MySQL数据库水平切分的实现原理解析
    SVN安装使用
    servlet基础
    数据库读写分离的性能分析
    java的可变长参数
    java消息服务
    static/final成员与多态
    商业软件与开源软件
    托管堆
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12603789.html
Copyright © 2011-2022 走看看