<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
display: flex;
}
.left{
flex: 0 0 200px;
background-color: gainsboro;
height: 100%;
}
.right{
flex: 1;
height: 100%;
border: solid 2px gray;
}
.left ul{
width: 100%;
height: 100%;
}
.left ul li{
list-style: none;
width: 100%;
height: 50px;
margin: 10px 0;
background-color: pink;
color: white;
line-height: 50px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
.active{
background-color: blue !important;
}
.right .item{
width: 100%;
height: 100%;
display: none;
}
</style>
<script src="./jquery-3.2.1.js"></script>
<div class="box">
<div class="left">
<ul>
<li class="active">首页</li>
<li>商城</li>
<li>后台</li>
</ul>
</div>
<div class="right">
<div class="item" style="display: block;">
<h1>首页</h1>
</div>
<div class="item">
<h2>内容区域</h2>
</div>
<div class="item">
<h2>
后台管理系统
</h2>
</div>
</div>
</div>
$(function(){
$(".left ul li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".right .item").eq(index).show().siblings().hide();
localStorage.index = index;
})
if(localStorage.index){
index =localStorage.index;
$(".left ul li").eq(index).addClass("active").siblings().removeClass("active");
$(".right .item").eq(index).show().siblings().hide();
}
})