首页 > 代码库 > python : HTML+CSS (左侧菜单)

python : HTML+CSS (左侧菜单)

2024-08-21 15:42:16   236人阅读

左侧菜单

技术分享 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <style>
       .hide{
            display: none;
        }
        .menu .head{
            height:38px;
            background-color: #2459a2;
            line-height: 38px;
        }
    </style>
</head>
<body>
<div style="height: 48px ;border: 1px solid red"></div>
<div style="width:300px ;border: 1px solid red ">
    <div class="menu">
           <div id=‘a1‘ class="head "  onclick="caidan(‘a1‘)">菜单1</div>
           <div class="conent">
                <div clas="item">内容1</div>
                <div clas="item">内容1</div>
                <div clas="item">内容1</div>
           </div>
    </div>

    <div class="menu">
           <div id=‘a2‘ class="head "   onclick="caidan(‘a2‘)">菜单2</div>
           <div class="conent hide">
                <div clas="item">内容2</div>
                <div clas="item">内容2</div>
                <div clas="item">内容2</div>
           </div>
    </div>

    <div class="menu">
           <div  id=‘a3‘ class="head"   onclick="caidan(‘a3‘)">菜单3</div>
           <div class="conent hide">
                <div clas="item">内容3</div>
                <div clas="item">内容3</div>
                <div clas="item">内容3</div>
           </div>
    </div>

    <div class="menu">
           <div id=‘a4‘ class="head"  onclick="caidan(‘a4‘)">菜单4</div>
           <div class="conent  hide">
                <div clas="item">内容4</div>
                <div clas="item">内容4</div>
                <div clas="item">内容4</div>
           </div>
    </div>

</div>
<script>

    function caidan(nod) {
        var head=document.getElementById(nod);
        curr_meu=head.parentElement.parentElement.children;
        for (var i=0; i<curr_meu.length; i++){
            var item_list=curr_meu[i];
            item_list.children[1].classList.add(‘hide‘);
        }
        head.nextElementSibling.classList.remove(‘hide‘)
    }
</script>
</body>
</html>
左侧菜单

 

python : HTML+CSS (左侧菜单)


联系
我们