36 page layout div + css

`` HTML `: RUN 
<! DOCTYPE HTML> 
<HTML> 
<head> 
    <Meta charset =" UTF-8 "> 
    <title> single page - Manage System </ title> 
    <Script of the type =" text / JavaScript " = the src "https://cdn.bootcss.com/jquery/1.9.0/jquery.js"> </ Script> 
    <Script type = "text / JavaScript" the src = "JS / jquery.js"> </ Script > 
    <style type = "text / CSS"> 
        / * common elements set * / 
        * {margin: 0; padding: 0;} 
        HTML, body {height: 100%;} 
        UL {List-style: none;} 
        A { Decoration-text: none; Color: #FFFFFF;} 
        .h3All {Color: # 666666;} 
        / * * public head set /
        .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"> system </ li> <-! after clicking on the corresponding page 1system.html index.html (ie this page) at the same level in the html folder -> 
        <li the above mentioned id = " 2event "> event </ li> 
        <li the above mentioned id =" 3securityPolicy "> security policy </ li> 
        <li the above mentioned id =" 4assetAudit "> asset audit </ li> 
        <li the above mentioned id =" 5industryControlAudit "> industrial audit </ li> 
        <li id = "6interfaceManage"> Interface management </ Li> 
        <ID = Li "7dataAcquisition "> Data Acquisition </ Li> 
        <Li ID =" 7 log "> Log </ Li> 
        <Li ID =" 8userManage "> User Management </ Li> 
        <Li ID =" 9set "> provided </ Li> 
    < / ul> 
</ div>
<div class = "rightContent" ID = "rightContent"> 
    <UL class = "tabTitle" ID = "tabTitle"> 
        <Li class = "tabTitleLiDisplay"> initializing a </ Li> 
        <Li class = "tabTitleLiNoDisplay"> Initialization two </ li> 
        <li class = "tabTitleLiNoDisplay"> initialize three </ li> 
    </ ul> 
    <div class = "tabContent" the above mentioned id = "tabContent"> 
        <-! the following, with the corresponding page on 1system.html index.html (i.e., this page) html sibling folder, the "white list" replaces "initialize a", "blacklist" will replace the "initialize two", and so on -> 
        <div = Data-blockname "white list"> here to fill in the corresponding tab content 1 </ div> 
        <div the Data-blockname = "blacklist"> here to fill in the corresponding tab content 2 </ div> 
        <-! above, the corresponding page 1system.html on the index.html (ie this page) sibling html folder, the "white list" will replace "initialize a" "black list" will replace "initialize two", and so on -> 
    </ div> 
</ div> 
</ body> 
</ HTML> 
<Script type = "text / JavaScript">
    $ (function () { 
        equalHeight (); 
        tabTitleLiClick (); 
        / * List Click the left navigation area, replacing the contents of the right side of content area * / 
        . $ (. "leftNavigationUl") the Click (function (Event) { 
            var $ eventTargetId event.target.id =; 
            $ ( "# leftNavigation") CSS ( "height", "100%");. 
            / * the following is a template region JS, depending if, fill out the appropriate logic * / 
            IF ($ == eventTargetId "1system") { 
                / * package function, here performed in other files, in order to avoid this page is too long JS * / 
                $ ( "# tabContent"). the Load ( "HTML / 1system.html", function () { 
                    tabContentLoad (); 
                    / * interactive content region written here, is then performed tabTitleLiClick () and qualHeight () * / 
                }) 
            } the else IF ($ eventTargetId == "1system"){
                / * Package function, here performed in other files, in order to avoid this page is too long JS * / 
                $ ( "# tabContent") the Load ( "HTML / 1system.html", function () {. 
                    TabContentLoad (); 
                    / * content interactive area to write in here, and then perform tabTitleLiClick () and qualHeight () * / 
                }) 
            } 
            / * JS template for the above area, depending on if, fill out the appropriate logic * / 
        }); 
        / * click on the right tab content area, switching the content in the content area * / 
        function tabTitleLiClick () { 
            . $ (. "tabTitle Li") the Click (function () { 
                var selfIndex = $ (the this) .index (); 
                $ (the 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 page layout div + css

Guess you like
