```html:run
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单页面--后台管理系统</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
/*公用元素设置*/
*{margin:0;padding:0;}
html,body{height:100%;}
ul{list-style: none;}
a{text-decoration: none;color:#FFFFFF;}
.h3All{color:#666666;}
/*公用头部设置*/
.headGeneral{position:absolute;width:100%;height:70px;background:url(https://cdn.files.qdfuns.com/article/content/picture/201806/26/204135szuewaa7ak4sdssl.png) no-repeat left center}
/*公用左侧导航设置*/
.leftNavigation{position:absolute;width:240px;min-height:100%;top:70px;left:0;}
.leftNavigation .leftNavigationUl{margin-top:76px;}
.leftNavigation .leftNavigationUl li{box-sizing: border-box;width:100%;height:54px;line-height: 54px;color:#FFFFFF;font-size: 18px;padding-left:56px;}
.leftNavigation .leftNavigationUl li:hover{background:mediumblue; }
/*公用右侧内容区设置*/
.rightContent{position:absolute;width:calc(100% - 240px);top:70px;left:240px;}
.rightContent .tabTitle{width:100%;height:50px;background: #d3d3d3;font-size: 0;}
.rightContent .tabTitle>li{margin-top:5px;height:40px;line-height:40px;display: inline-block;width:134px;text-align: center;border-top-left-radius: 4px;border-top-right-radius: 4px;margin-left: 10px;font-size: 16px;user-select:none;cursor:pointer;}
.rightContent .tabTitle>li.tabTitleLiDisplay{border-top:5px solid blue;background: #FFFFFF;}
.rightContent .tabTitle>li.tabTitleLiNoDisplay{border-top:5px solid #8D98A5;background: #8D98A5;}
.rightContent .tabContent{width:100%;background: #FFFFFF;}
.rightContent .tabContent>div{display:none;padding-left:30px;padding-top:39px;}
.rightContent .tabContent>div:first-child{display: block;}
</style>
</head>
<body>
<div class="headGeneral" id="headGeneral">
</div>
<div class="leftNavigation" id="leftNavigation">
<ul class="leftNavigationUl">
<li id="1system">系统</li><!--点击后，对应页面1system.html放在与index.html（即本页面）同级的文件夹html里-->
<li id="2event">事件</li>
<li id="3securityPolicy">安全策略</li>
<li id="4assetAudit">资产审计</li>
<li id="5industryControlAudit">工控审计</li>
<li id="6interfaceManage">接口管理</li>
<li id="7dataAcquisition">数据采集</li>
<li id="7log">日志</li>
<li id="8userManage">用户管理</li>
<li id="9set">设置</li>
</ul>
</div>
<div class="rightContent" id="rightContent">
<ul class="tabTitle" id="tabTitle">
<li class="tabTitleLiDisplay">初始化一</li>
<li class="tabTitleLiNoDisplay">初始化二</li>
<li class="tabTitleLiNoDisplay">初始化三</li>
</ul>
<div class="tabContent" id="tabContent">
<!--以下内容，对应页面1system.html放在与index.html（即本页面）同级的文件夹html里，“白名单”将替换“初始化一”，“黑名单”将替换“初始化二”，以此类推-->
<div data-blockName="白名单">此处填写选项卡对应的内容1</div>
<div data-blockName="黑名单">此处填写选项卡对应的内容2</div>
<!--以上内容，对应页面1system.html放在与index.html（即本页面）同级的文件夹html里，“白名单”将替换“初始化一”，“黑名单”将替换“初始化二”，以此类推-->
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
equalHeight();
tabTitleLiClick();
/*点击左侧导航区列表，更换右侧内容区的内容*/
$(".leftNavigationUl").click(function (event) {
var $eventTargetId=event.target.id;
$("#leftNavigation").css("height","100%");
/*以下内容为JS模板区，根据不同的if，填写相应的逻辑*/
if($eventTargetId=="1system"){
/*在其他文件里封装函数，在这里执行，以免此页面JS太长*/
$("#tabContent").load("html/1system.html",function () {
tabContentLoad();
/*内容区的交互写在此处，然后执行tabTitleLiClick()和qualHeight()*/
})
}else if($eventTargetId=="1system"){
/*在其他文件里封装函数，在这里执行，以免此页面JS太长*/
$("#tabContent").load("html/1system.html",function () {
tabContentLoad();
/*内容区的交互写在此处，然后执行tabTitleLiClick()和qualHeight()*/
})
}
/*以上内容为JS模板区，根据不同的if，填写相应的逻辑*/
});
/*点击右侧内容区选项卡，切换内容区显示的内容*/
function tabTitleLiClick(){
$(".tabTitle li").click(function(){
var selfIndex = $(this).index();
$(this).removeClass("tabTitleLiNoDisplay").addClass("tabTitleLiDisplay").siblings().removeClass("tabTitleLiDisplay").addClass("tabTitleLiNoDisplay");
$(".tabContent>div").eq(selfIndex).show().siblings().hide();
});
}
/*内容区加载时，执行此函数*/
function tabContentLoad(){
var tabContentDiv=$(".tabContent>div");
var tabTitle=$("#tabTitle");
var string = '';
tabTitle.empty();
tabContentDiv.each(function (index,item) {
string+=' <li class="'+(index===0?"tabTitleLiDisplay":"tabTitleLiNoDisplay")+'">'+$(item).attr("data-blockName")+'</li>';
});
tabTitle.html(string);
tabContentDiv.eq(0).show().siblings().hide();
tabTitleLiClick();
equalHeight();
}
/*初始化左右等高*/
function equalHeight(){
var $leftNavigation=$("#leftNavigation");
var $leftNavigationHeight=parseInt($leftNavigation.css("height"));
var $tabContent=$("#tabContent");
var $tabContentHeight=parseInt($tabContent.css("height"));
var $rightContent=$("#rightContent");
var $rightContentHeight=50+$tabContentHeight;
var $leftRightDistance = $leftNavigationHeight-$rightContentHeight;
if($leftRightDistance>=0){
$leftNavigation.css("background","#104599");
$rightContent.css({"height":($rightContentHeight+$leftRightDistance)+"px","background":"#FFFFFF"});
}else{
$leftNavigation.css({"height":($leftNavigationHeight-$leftRightDistance)+'px',"background":"#104599"});
$rightContent.css("background","#FFFFFF");
}
}
});
</script>
```
36页面布局div+css
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10966666.html
今日推荐
周排行