4.8jQuery --练习左侧菜单栏

最新推荐文章于 2022-03-01 01:10:20 发布

寒暄

最新推荐文章于 2022-03-01 01:10:20 发布

阅读量150

点赞数

分类专栏： ▶寒暄_前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_41106844/article/details/105554097

版权

▶寒暄_前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .outer{
        height:1000px;
        width:100%;
        }
        .munu{
        float:left;
        background-color:beige;
        width:30%;
        height:500px;
        }
        .content{
        float:left;
        background-color:rebeccapurple;
        width:70%;
        height:500px;
        }
        .title{
        background-color:aquamarine;
        line-height:40px;
        }
        .hide{
        display:none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="munu">

        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>

    <div class="content"></div>
</div>

<script src="../jquery-3.4.1.js"></script>

<script>


    function show(self){
        $(self).next().removeClass("hide");
        $(self).parent().siblings().children(".con").addClass("hide");
    }
</script>
</body>
</html>

寒暄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.8jQuery --练习左侧菜单栏

总目录：https://www.jianshu.com/p/8b3e5b2b4497前端 - 子目录：https://www.jianshu.com/p/6fdb59d92e43<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫