后台管理左侧菜单

最新推荐文章于 2023-06-20 14:51:33 发布

73、

最新推荐文章于 2023-06-20 14:51:33 发布

阅读量396

点赞数

分类专栏： # 前端实例文章标签：后台管理左侧菜单 DOM

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103547638

版权

前端实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .item .header{
                height: 35px;
                background-color: #2459a2;
                color:white;
                line-height: 35px;
            }
        </style>
    </head>
    <body>
        <div style="height:48px;"></div>
        <div style="width:300px;">
            <div class="item">
                <div id='i1' class="header" οnclick="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" οnclick="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" οnclick="changeMenu('i3');">菜单3</div>
                <div class="content hide">
                    <div>内容3</div>
                    <div>内容3</div>
                    <div>内容3</div>
                </div>
            </div>
            <div class="item">
                <div id='i4' class="header" οnclick="changeMenu('i4');">菜单4</div>
                <div class="content hide">
                    <div>内容4</div>
                    <div>内容4</div>
                    <div>内容4</div>
                </div>
            </div>
        </div>

        <script>
            function changeMenu(nid){
                var current_nid = document.getElementById(nid);
                var item_list = current_nid.parentElement.parentElement.children;
                console.log(item_list);
                for(var i=0; i<item_list.length; i++){
                    var current_item = item_list[i];
                    current_item.children[1].classList.add('hide');
                }
                //console.log(item_list);
                current_nid.nextElementSibling.classList.remove('hide');
            }
        </script>
    </body>
</html>