Dom编程-左侧菜单栏设计模型实现

最新推荐文章于 2023-11-05 15:45:27 发布

weixin_34235457

最新推荐文章于 2023-11-05 15:45:27 发布

阅读量123

点赞数

原文链接：http://www.cnblogs.com/fuyuteng/p/9414735.html

版权

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


    </div>
    <script>
        function ChangeMenu(nid) {
            var current_header=document.getElementById(nid);
            //找到所有的item标签
             var item_list = current_header.parentElement.parentElement.children;

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