JS DOM管理后台左侧菜单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            height: 30px;
            background-color: blue;
            color: white;
            line-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
    <div class="item">
        <div id="i1" class="header" onclick="changeMenu('i1');">菜单一</div>
        <div class="content">
            <div>内容一</div>
            <div>内容一</div>
            <div>内容一</div>
        </div>
    </div>
    <div class="item">
        <div id="i2" class="header"  onclick="changeMenu('i2');">菜单二</div>
        <div class="content hide">
            <div>内容二</div>
            <div>内容二</div>
            <div>内容二</div>
        </div>
    </div>
    <div class="item">
        <div id="i3" class="header"  onclick="changeMenu('i3');">菜单三</div>
        <div class="content hide">
            <div>内容三</div>
            <div>内容三</div>
            <div>内容三</div>
        </div>
    </div>
    <div class="item">
        <div id="i4" class="header"  onclick="changeMenu('i4');">菜单四</div>
        <div class="content hide">
            <div>内容四</div>
            <div>内容四</div>
            <div>内容四</div>
        </div>
    </div>
</div>

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

    }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容