JavaScript基础（9.左侧菜单实例）

来源：互联网发布：csgo数据互换器永久编辑：程序博客网时间：2024/06/06 03:46

当前所学做出来的代码量有点大，以后的学习会使它更简单

<!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" onclick="ChangeMenu('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="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" onclick="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" onclick="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_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>效果就是这样：点击任意一个菜单后就会这样：这样就实现了一个简单的菜单。

阅读全文

0 0