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

article/2025/11/10 17:38:43

效果图

在这里插入图片描述

代码

复制下来直接运行就可以

<!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>