jQuery——菜单栏

最新推荐文章于 2023-07-28 15:50:21 发布

我是黎族人

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量942

点赞数

分类专栏： HTMl jQuery CSS

本文链接：https://blog.csdn.net/qq_40894300/article/details/89922847

版权

HTMl 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

18 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .memu{
            height: 38px;
            background-color: #eeeeee;
            cursor: pointer;
        }
        .memu-item{
            float: left;
            border-right: 3px solid red;
            padding: 0 5px;
            line-height: 38px;
        }
        .content{
            min-height: 50px;
            border: 3px solid red;
        }
        .active{
            background-color: aqua;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <div style="width: 700px; margin: auto">
        <div class="memu">
            <div class="memu-item active">菜单一</div>
            <div class="memu-item">菜单二</div>
            <div class="memu-item">菜单三</div>
        </div>
        <div class="content">
            <div>内容一</div>
            <div class="hide">内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.memu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
        })
    </script>
</body>
</html>```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190507155517903.png)

我是黎族人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——菜单栏

菜单栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; ...
复制链接

扫一扫