示例之后台管理左侧菜单

最新推荐文章于 2024-07-26 20:46:33 发布

up1292

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量156

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/up1292/article/details/126713289

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .header{
            background-color: blue;
        }
        .content{
            background-color: dodgerblue;
        }
    </style>
</head>
<body style="margin:0";>
    <div style="width:300px;">
        <div class="item">
            <div id="i1" class="header" onclick="Change('i1');">菜单1</div>
            <div class="content hide">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="Change('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="Change('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
    </div>

    <script>
        function Change(nid){
           var menu = document.getElementById(nid);
           content_list = menu.parentElement.parentElement.children;
           for(var i=0;i<content_list.length;i++) {
                content_list[i].children[1].classList.add('hide');  //将菜单和内容全部隐藏
           }
           menu.nextElementSibling.classList.remove('hide');    //将当前菜单下的内容显示
        }
    </script>
</body>
</html>