```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>```
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10966666.html
时间： 2024-10-31 23:15:47