html左侧导航栏右侧显示内容

最新推荐文章于 2023-12-19 10:17:04 发布

m0_67391683

最新推荐文章于 2023-12-19 10:17:04 发布

阅读量6.1k

点赞数 15

分类专栏：前端 html 文章标签： git github vue.js

本文链接：https://blog.csdn.net/m0_67391683/article/details/123346763

版权

前端同时被 2 个专栏收录

32 篇文章 5 订阅

订阅专栏

html

32 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

复制下来直接运行就可以

<!doctype html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta name = "viewport"
              content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
        <title>Test</title>
        <script src = "js/jquery-3.6.0.js"></script>
        <style>
            /*兼容浏览器*/
            * {
                margin: 0;
                padding: 0;
            }

            .content {
                width: 100%;
                height: 100%;
            }

            .content-left {
                width: 19%;
                height: 600px;
                background-color: #1c232f;
                float: left;
            }

            .content-right {
                width: 81%;
                height: 600px;
                background-color: #6495ED;
                float: left;
            }

            .left-title {
                width: 100%;
                height: 50px;
            }

            .left-title > a {
                display: block;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: white;
                /*去掉a下默认下划线*/
                text-decoration: none;
            }

            /*分割线*/
            .seg {
                height: 1px;
                width: 100%;
                background-color: black;
            }

            .nav {
                /*上下5,左右0*/
                margin: 5px 0;
            }

            /*菜单项主标题*/
            .nav-title {
                height: 40px;
                width: 100%;
                color: white;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }

            /*子标题内容区*/
            .nav-content {
                width: 100%;
                height: 100%;
                background-color: #0C1119;
            }

            /*子标题的样式*/
            .nav-content > a {
                display: block;
                width: 100%;
                height: 30px;
                color: #CCCCCC;
                text-decoration: none;
                text-align: center;
                line-height: 30px;
                font-size: 13px;
            }

            /*子标题鼠标经过时的改变颜色*/
            .nav-content > a:hover {
                color: #FFFFFF;
                background-color: #12040c;
            }

            /*内容区*/
            .content-right{
                font-size: 50px;
                line-height: 600px;
                text-align: center;
            }
        </style>

        <script src = "https://code.jquery.com/jquery-3.2.1.min.js"
                integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin = "anonymous"></script>

        <script>
            $(function () {

                //隐藏所有子标题
                $(".nav-menu").each(function () {
                    $(this).children(".nav-content").hide();
                });

                //给菜单项中的所有主标题绑定事件
                $(".nav-title").each(function () {
                    //获取点击当前标签下所有子标签
                    var navConEle = $(this).parents(".nav-menu").children(".nav-content");

                    //绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
                    $(this).click(function(){
                        if (navConEle.css("display") != "none") {
                            //隐藏,传参数自带动画,单位为毫秒
                            navConEle.hide(300);
                        } else {
                            //显示,传参数自带动画,单位为毫秒
                            $(".nav-menu").each(function () {
                                $(this).children(".nav-content").hide(300);
                            });
                            navConEle.show(300);
                        }
                    });
                });

                $(".nav-content>a").each(function () {
                    $(this).click(function () {
                        $(".content-right").html($(this).html());
                    });
                });

            });
        </script>
    </head>
    <body>
        <div class = "content">
            <!--左侧导航栏-->
            <div class = "content-left">
                <div class = "left-title">
                    <a href = "#">xx后台</a>
                </div>

                <!--水平线-->
                <div class = "seg"></div>

                <!--菜单栏导航-->
                <div class = "nav">
                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">商品管理</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "#">商品列表</a>
                            <a href = "#">添加商品</a>
                        </div>
                    </div>

                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">订单管理</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "#">订单查看</a>
                            <a href = "#">订单排序</a>
                        </div>
                    </div>

                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">类目管理</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "#">类目查看</a>
                            <a href = "#">类目删除</a>
                        </div>
                    </div>
                </div>

                <!--水平线-->
                <div class = "seg"></div>
            </div>

            <!--右侧内容区-->
            <div class = "content-right">
                <h1>内容区</h1>
            </div>
        </div>
    </body>
</html>

m0_67391683

关注

15
点赞
踩
103

收藏

觉得还不错? 一键收藏
9
评论
html左侧导航栏右侧显示内容

效果图代码复制下来直接运行就可以<!doctype html><html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
复制链接

扫一扫