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.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;js导航栏下拉菜单
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 ="code.jquery/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>