- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 长扬科技 </title>
- <script type="text/javascript" src="https://cdn.bootCSS.com/jquery/1.9.0/jquery.js"></script>
- <style type="text/css">
- *{margin:0;padding:0;}
- html,body{height:100%;}
- ul{list-style: none;}
- .headGeneral{position:absolute;width:100%;min-height:100%;background:gray;}
- .leftNavigation{position:absolute;width:200px;min-height:100%;top:70px;left:0;}
- .leftNavigation .leftNavigationUl{margin-left:30px;}
- .leftNavigation .leftNavigationUl li{height:40px;line-height: 40px;}
- .rightContent{position:absolute;width:100%;height:200px;top:70px;left:200px;}
- .rightContent .tabTitle{width:100%;height:50px;background: red;font-size: 0;}
- .rightContent .tabTitle>li{display: inline-block;width:130px;height:40px;text-align: center;line-height: 40px;border-top:5px solid blue;border-top-left-radius: 4px;border-top-right-radius: 4px;margin-left: 10px;margin-top: 5px;font-size: 16px;}
- .tabTitleLiDisplay{background: #FFFFFF;}
- .tabTitleLiNoDisplay{background: green;}
- .rightContent .tabContent{width:100%;background: #FFFFFF;}
- .rightContent .tabContent>div{display:none;}
- .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 > 左侧列表 </li>
- <li > 左侧列表 </li>
- <li > 左侧列表 1</li>
- <li > 左侧列表顶顶顶顶顶 </li>
- <li > 左侧列表 </li>
- <li > 左侧列表 </li>
- <li > 左侧列表 </li>
- <li > 左侧列表 </li>
- <li > 左侧列表 </li>
- </ul>
- </div>
- <div class="rightContent" id="rightContent">
- <ul class="tabTitle">
- <li class="tabTitleLiDisplay"> 选项卡一 </li>
- <li class="tabTitleLiNoDisplay"> 选项卡二 </li>
- <li class="tabTitleLiNoDisplay"> 选项卡三 </li>
- </ul>
- <div class="tabContent">
- <div > 内容区一 </div>
- <div > 内容区二 </div>
- <div > 内容区三 </div>
- </div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- $(function(){
- var $leftNavigation=$("#leftNavigation");
- var $leftNavigationHeight=parseInt($leftNavigation.css("height"));
- var $rightContent=$("#rightContent");
- var $rightContentHeight=parseInt($rightContent.css("height"));
- var $leftRightDistance = $leftNavigationHeight-$rightContentHeight;
- console.log($leftNavigationHeight);
- console.log($rightContentHeight);
- if($leftRightDistance>=0){
- $leftNavigation.css("background","silver");
- $rightContent.css({"height":($rightContentHeight+$leftRightDistance)+"px","background":"#FFFFFF"});
- }else{
- $rightContent.css("background","darkgray");
- $leftNavigation.css({"height":($leftNavigationHeight-$leftRightDistance)+'px',"background":"silver"});
- }
- $(".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();
- });
- });
- </script>
- css
来源: http://www.qdfuns.com/article/40901/c6abbeab0b14424cb58111ba5f506381.html