使用ifram+layui中的选项卡构建左边的导航栏
index.html
使用layui重新定义插件的样式
重新写的css文件要放在layui.css文件后面，才能覆盖掉layui中的样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>使用ifram+layui中的'选项卡'构建左边的导航栏</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="cma.css">
<script src="layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">定量企业自评系统</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
企业名称
</li>
</ul>
</div>
<div class="layui-side layui-side-menu">
<!--带滚动条垂直导航-->
<div class="layui-side-scroll layui-bg-black">
<div class="layui-logo">后台管理系统</div>
<ul class="layui-nav layui-nav-tree" lay-filter="navtree">
<li class="layui-nav-item">
<a href="javascript:;" title="用户"><i class="layui-icon layui-icon-user"></i><cite>资料查询</cite></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="">基本信息</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="">企业信息</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./baseInfo/productInfo.jsp">产业信息</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./baseInfo/myInfo.jsp">我的信息</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" title="设置"><i class="layui-icon layui-icon-set"></i><cite>设置</cite></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./information/manager.jsp">管理办法</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./information/appraise.jsp">评价信息规范</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./information/cuse.jsp">C标志使用规则</a></dd>
</dl>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-href="./information/honest.jsp">诚信计量公开承诺书</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body" style="bottom: 1px">
<div class="layui-tab" lay-filter="pagetabs" lay-allowclose="true" style="margin:0 0;">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">主页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src="" style="width: 100%;height: 100%" class="layui-admin-iframe" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
F
</div>
<script>
layui.use(['element','layer'],function(){
var element = layui.element
,layer = layui.layer
,$ = layui.jquery;
//左侧垂直菜单监控
element.on('nav(navtree)',function(elem){
if($(".layui-side-menu").width()<200){
$(".layui-side-menu").animate({
width:$(".layui-side-menu").width()+144+"px"});
$(".layui-body").animate({
left:$(".layui-body").position().left+144+"px"});
$(".layui-footer").animate({
left:$(".layui-footer").position().left+144+"px"});
$(".layui-layout-left li:first-child").find("a").attr("class","hidetab");
$(".layui-layout-left li:first-child").find("i").attr("class","layui-icon layui-icon-shrink-right");
$(".layui-nav-tree").find("li").each(function(em,ind){
$(this).find("cite").css("display","");
$(this).find("dl").css("display","");
});
}else{
if($(this).attr("lay-href")!=undefined){
var flag = true;
//url
var url = $(this).attr("lay-href");
//判断选项卡中是否存在已打开的页面，如果有直接切换到打开页面
$(".layui-tab-title li").each(function(i,e){
if($(this).attr("lay-id")==url){
//切换选项卡
element.tabChange('pagetabs', url);
flag = false;
}
//tab做了操作就更新tab的高度
var h=window.screen.height;
$(".layui-show").css("height",h);
})
if(flag){
//新增选项卡
element.tabAdd('pagetabs', {
title: elem[0].innerText
,content: ''
,id: url
});
//切换选项卡
element.tabChange('pagetabs', url);
//tab做了操作就更新tab的高度
var h=window.screen.height;
$(".layui-show").css("height",h);
}
}
}
});
});
</script>
</body>
</html>cma.css
.layui-layout-admin .layui-header{
background-color: rgb(67,120,190);
}
.layui-layout-admin .layui-logo{
color: #FFF;
}
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{
background-color: rgb(67,120,190);
}
.layui-nav-tree .layui-nav-bar{
background-color: rgb(67,120,190);
}
.layui-tab-title .layui-this{
}
.table0{
border:1px solid grey;
}
.table0 thead tr td{
/* border:1px solid grey; */
line-height: 30px;
padding: 5px 8px;
font:bold 12px/30px "微软雅黑";
}
.table0 tbody tr td{
/* border:1px solid grey; */
line-height: 30px;
padding: 5px 8px;
font:bold 12px/30px "微软雅黑";
}
.mana .head{
font-size: 12.0pt;
font-family: 宋体;
}
.mana .content div{
margin-top:5px;
font-size: 12.0pt;
font-family: 宋体;
}
.baozhuang{
margin-top:50px;
margin-bottom:50px;
}
.tab1{
margin-top:260px;
}
.tab1 table tr {
border:1px;
text-align:center;
height:70px;
}
.tab1 table tr td{
width:245px;
}
.tab2{
margin-top:260px;
}
.tab2 table tr{
border:1px;
text-align:center;
}
.tab2 table tr th{
height:70px;
width:290px
}
.tab2 table tr td{
height:130px;
}
.tab3{
margin-top:260px;
}
.tab3 table tr{
border:1px;
text-align:center;
}
.tab3 table tr td{
width:258px;
height:55px;
}
.tab3info{
margin-top:10px;
font-size:12px;
}
.tab4{
margin-top:260px;
}
.tab4 table tr{
border:1px;
text-align:center;
}
.tab4 table tr td{
width:110px;
height:60px;
}
.tab4info{
margin-top:10px;
font-size:12px;
}
.tab4info2{
margin-left:25px;
margin-top:10px;
font-size:12px;
}
/* end */
/* appraise .jsp */
.appcompany{
float:left;
margin-left:26%;
}
.apptab table tr{
border:1px;
}
.apptab table tr td{
font-size: 9.0pt;
font-family: 仿宋_GB2312;
}
.appzhu{
margin-top:30px;
}
.appzhushi{
margin-top:10px;
font: 12px/1.2em Microsoft YaHei;
}
.appzhushi1{
margin-left:25px;
margin-top:10px;
font: 12px/1.2em Microsoft YaHei;
}
/* end */
/* cuse */
.cuseBox{
margin-top:80px;
}
.cuseInfo{
margin-left:20px;
margin-right:20px;
font-size: 14.0pt;
font-family: 仿宋_GB2312;
}
/* end */
/* honest 诚信计量 */
.honestContent{
margin-top:100px;
}
.honestInfo{
margin-top:10px;
margin-left:20px;
margin-right:20px;
font-size: 15.0pt;
font-family: 方正仿宋_GBK;
}
.honestCom{
margin-top:50px;
}
.honestComInfo{
margin-top:10px;
margin-left:280px;
font-size: 15.0pt;
font-family: 方正仿宋_GBK;
}
/* end */
/* productInfo */
.layui-table-tool{
display:none;
}
/* end */
/* addProduct */
.addProduct{
width:100%;
background-color:rgb(238,244,255);
}
.addProIn{
width:99%;
height:600%;
background-color:white;
}
.addProBtn{
margin-bottom:10px;
}
.layui-form-select dl dd.layui-this{
background-color:#5685e6;
}
.layui-form-checked[lay-skin=primary] i{
background-color:#5685e6;
}
/* end */
.buttons{
padding-bottom: 5px;
}