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

已于 2022-10-25 17:04:01 修改
阅读量2.8w 收藏 558
点赞数 71
分类专栏： web前端 文章标签： html 菜单栏 javaScript
于 2021-08-02 18:35:14 首次发布
需转载请联系QQ:846581636
本文链接：https://blog.csdn.net/LYXlyxll/article/details/119331434
版权

效果图

在这里插入图片描述

代码

复制下来直接运行就可以

<!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 = "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>
io无心
关注
  • 71
    点赞
  • 踩
  • 558
    收藏
    觉得还不错? 一键收藏
  • 59
    评论
专栏目录
html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页
weixin_29579377的博客
06-02 6375
方式一：采用iframe,即将网页放入iframe这个容器中。方式二：采用div的话绑定a或者li的点击事件 阻止a的默认行为，用jquery的load()可以来加载这个div，即将网页放入div中。方式三：angular的嵌套路由也可以实现。不过本人对angular不是很了解，所以这种方式没有去试。方式四：采用ajax技术，实现局部刷新。(本人觉得该方式比较麻烦，就不在这细说了)。二者的实现方式...
如何使左侧导航栏点击时，切换右侧内容数据，html、js，一二级菜单均可使用
m0_62996549的博客
05-15 4952
2.在你需要点击切换的地方（注：我写的是div块导航，有些是li，不影响的）加上data-src=“ ”，里面写你要跳转的html。3.ok，现在，在你要加的地方，添加上iframe标签，注意src一定要为空（看图片我标注了），因为不知道取到那个页面值。4.方法看得懂吧，通过前面的导航栏点击第几个块，数组就返回第几个页面，然后传src到iframe标签，就能实现了。代码少我就不全部放了，自己敲一遍试试，不会可以问。首先，把这个js加上，不用下载可以直接使用。如何使左侧导航栏点击时，切换右侧内容数据。
左侧菜单栏控制右侧页面内容切换
01-18
本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
html+css侧边抽屉式导航栏
09-14
html+css侧边抽屉式导航栏
左栏固定，右栏自适应布局
shuifa2008的专栏
10-21 1480
经常会看到这样的布局，比如博客左栏要放导航，宽度固定，右边显示内容，然后右栏的内容要根据窗口的缩放自适应。 第一种方法比较简单，也是大多数人比较常用的。 一、使用margin实现左固定右自适应 1.html代码 ? 1 2 div id="left">div> div id="right">div>
html5导航栏div右侧显示内容,HTML5+CSS：左边导航栏，右边是对应的文本区域
weixin_42338883的博客
06-03 2253
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test#left,#right{float:left;color:#FF33CC;}#right{padding:10px;margin-top:40px;}body{f...
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 4695
html+css+javascript+echarts设计的demo，快来学习吧
Ⅰ版本一、html强大的“点击左侧栏目，右侧对应的内容显示的模板思路”一套一个准。
最新发布
weixin_44826783的博客
11-11 672
所以我们得稍微想一下，就是在点击事件之前，我用不用先判断是否已经有显示过的，如果有的话，我们拿到那个已经显示的index，然后先让这个已经显示的index隐藏掉，然后你当前点击的index才显示出来。先定义一个变量show_tag代表已经显示的，然后给左边每一个document写点击事件，在点击事件里面，就先判断shw_tag是否等于当前$(this).index()，如果不相等，直接让已经显示的show_tag对应的right隐藏，当前自己$(this).index()对应的right显示。
html左侧导航右侧内容,HTML5+CSS：左边导航栏，右边是对应的文本区域
weixin_35861708的博客
05-30 4649
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test#left,#right{float:left;color:#FF33CC;}#right{padding:10px;margin-top:40px;}body{f...
HTML侧边导航栏
jakelihua
10-19 1万+
本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
竖排着的导航菜单 html5
06-23
竖排着的导航菜单，向古书写在竹子上的一样，菜单多的时候可以向一边卷。
html页面左侧导航
07-19
html左侧导航，而且可以用鼠标拖动到任意的地方。美观、简介、大方
左边联动菜单
06-29
左边联动二级菜单，简单CSS设计，宽度，高度可自行调整。
左侧导航栏
03-27
左侧导航栏
记录原生html+js实现左侧导航栏右侧内容页的实现
10-17
记录原生html+js实现左侧导航栏右侧内容页的实现
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
layui实现左侧菜单点击右侧内容区显示
10-16
例如，可以通过`layui.util.tabAdd()`或`layui.layer.open()`这样的layui方法来动态添加新的Tab或弹窗，显示对应URL的内容。 `layui.util.tabAdd()`函数接收的参数包括新Tab的标题、URL和类型（是否新开Tab）。在这...
左边菜单，右边内容
qq_29663071的博客
03-20 4481
使用frameset实现 主框架(main.html)左右两框 左边功能菜单（left.html） 右边内容（content*.html）   main.html DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> html>
html左侧导航栏iframe模板,用DIV怎么实现框架的效果，就是点左边的导航栏，在右边显示内容，不用iframe的话，该怎么实现呢...
热门推荐
weixin_35719402的博客
06-01 2万+
慕标0481585https://www.imooc.com/search/wenda?words=%E4%B8%80%E8%88%AC%E6%89%93%E5%BC%B9%E5%BC%93%E7%94%A8%E5%87%A0%E6%AF%AB%E7%B1%B3%E5%BC%B9%E7%8F%A0%E5%A5%BD%E7%94%A8%E3%80%906499%2B5331%27q%E3%80%91...
html 左侧显示导航栏右侧显示不同内容
05-18
这可以通过使用 HTML 和 CSS 来实现。可以将导航栏和内容区域放到不同的 div 容器中，并使用 CSS 将它们分别定位在页面的左侧和右侧。 以下是一个示例代码，其中 nav 元素表示导航栏，content 元素表示内容区域： ``` <!DOCTYPE html> <html> <head> <title>Navigation and Content</title> <style type="text/css"> .container { display: flex; flex-direction: row; } nav { width: 20%; background-color: #f2f2f2; padding: 20px; box-sizing: border-box; } nav ul { list-style: none; padding: 0; margin: 0; } nav li { margin-bottom: 10px; } nav a { text-decoration: none; color: #333; font-weight: bold; } .content { width: 80%; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </nav> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, nisi nec malesuada ullamcorper, lorem ipsum lobortis velit, vel accumsan eros sem ac nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Vivamus et maximus erat, eget lacinia diam. Proin gravida, augue vel ultricies malesuada, nibh sapien euismod nisi, vel vehicula dolor magna in ex. Sed convallis ipsum id ipsum bibendum, at tempor magna porttitor. Vestibulum euismod leo ante, vel scelerisque justo lacinia at. Donec semper pellentesque metus, ut consequat diam iaculis ut. Sed euismod lectus vel nulla placerat, sit amet sodales lacus egestas. Donec aliquam lectus ut semper faucibus.</p> </div> </div> </body> </html> ``` 在上面的代码中，我们使用了 flexbox 布局来将导航栏和内容区域水平排列。nav 元素的宽度为 20%，content 元素的宽度为 80%。通过设置这两个元素的宽度比例，我们实现了左侧显示导航栏右侧显示不同内容的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 59
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值