js之后台管理左侧菜单

1、后台管理左侧菜单，即当选择菜单2时，菜单2的内容显示；其他菜单的内容隐藏

使用了DOM间接选择器：

<!DOCTYPE html>
<html lang="en">
<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="width:50px">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
    </div>
    <script>
        function ChangeMenu(nid){
            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>
</html>

执行结果如下：

当点击菜单2时，菜单2的内容显示；其他菜单的内容隐藏。

posted @ 2020-03-03 20:29  凸凸yolotheway  阅读(422)  评论(0)  编辑  收藏  举报