day47-左侧菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单栏示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .left {
            width: 30%;
            height: 100%;
            border: 5px black solid;
            background-color: darkgrey;
        }
        .right {
            width: 70%;
            height: 100%;
            border: 5px black solid;
            background-color: cadetblue;
        }
        .item {
            font-size: 24px;
            color: black;
            text-align: center;
        }
        .title {
            font-size: 18px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="item">章节1
        <p class="title hide">标题一</p>
        <p class="title hide">标题二</p>
        <p class="title hide">标题三</p>
    </div>
    <div class="item">章节2
        <p class="title hide">标题一</p>
        <p class="title hide">标题二</p>
        <p class="title hide">标题三</p>
    </div>
    <div class="item">章节3
        <p class="title hide">标题一</p>
        <p class="title hide">标题二</p>
        <p class="title hide">标题三</p>
    </div>

</div>

<script>
    $('.item').click(function () {
        console.log($(this));
        $(this).children().removeClass('hide').parent().siblings().children().addClass('hide');
    })

</script>

<div class="right"></div>
</body>
</html>

来源：https://www.cnblogs.com/WM2019/p/11893920.html

标签

菜单栏

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!