python学习之网站的编写（HTML，CSS，JS）（十六）----------示例，构造一个左侧管理菜单的功能，点击主菜单才显示下面的内容

结果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆水行舟不进则退</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #ff0000;
            color: #ffffff;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="width: 300px">
        <div class="item">
            <div id="i1" class="header" onclick="show('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="show('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="show('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="show('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>
    <script>
        alert('欢迎来到逆水行舟不进则退的主页');
//        思路：先让所有的都不显现，再让指定输入的内容显现
//        通过id找到菜单，然后往上返两层再往下返一层就可以得到所有的item条目
//        然后让所有的都加上display:none让所有都不显示
//        最后让指定的内容显示
        function show(id) {
            var current_header=document.getElementById(id);
            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>

python学习之网站的编写（HTML，CSS，JS）（十六）----------示例，构造一个左侧管理菜单的功能，点击主菜单才显示下面的内容

相关推荐