不多bb，直接上代码
html的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理界面-电影推酷网</title> <link rel="icon" href="/static/images/angryBird.ico" /> <link rel="stylesheet" href="/static/layui/css/layui.css"> <link rel="stylesheet" href="/static/csss/index.css"> <script src="/static/layui/layui.js"></script> <script src="/static/js/jquery.js"></script> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header header header-demo" > <a class="logo"> <img src="../static/images/logo1.png" style=" 200px;height: 60px;padding:0 -15px!important;"/> </a> <ul class="layui-nav layui-layout-right" lay-filter="header-right"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite id="manager">管理员</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="set/user/info.html">基本资料</a></dd> <dd><a lay-href="set/user/password.html">修改密码</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">导航菜单</a> <dl class="layui-nav-child"> <dd><a href="#" class="site-demo-active" data-url="addFilm.html" data-id="1" data-title="添加电影信息"> <i class="layui-icon layui-icon-add-circle"></i> 添加电影信息 </a> </dd> <dd><a href="#" class="site-demo-active" data-url="infoManage.html" data-id="2" data-title="电影动态管理"> <i class="layui-icon layui-icon-add-circle"></i> 电影动态管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="filmManage.html" data-id="3" data-title="电影信息管理"> <i class="layui-icon layui-icon-add-circle"></i> 电影信息管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="webSiteManage.html" data-id="4" data-title="网址信息管理"> <i class="layui-icon layui-icon-add-circle"></i> 网址信息管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="linkManager.html" data-id="5" data-title="友情链接管理"> <i class="layui-icon layui-icon-add-circle"></i> 友情链接管理</a> </dd> <dd><a href="javascript:logout()"> <i class="layui-icon layui-icon-add-circle"></i> 安全退出</a> </dd> </dl> </li> </ul> </div> </div> <div class="layui-tab layui-tab-brief " lay-filter="demo" lay-allowClose="true"> <ul class="layui-tab-title site-demo-title"> <li class="layui-this" lay-id="111"><i class="layui-icon layui-icon-home"></i>首页</li> </ul> <div class="layui-body layui-tab-content site-demo site-demo-body"> <div class="layui-tab-item layui-show"> <div style="text-align: center;padding-top: 100px"> <strong style="color: red;font-size: 50px">欢迎使用</strong> </div> </div> </div> </div> <div class="layui-footer footer footer-demo"> 重构电影推酷网后台管理界面 </div> </div> <script src="/static/js/index.js"></script> <script> /*<![CDATA[*/ function logout() { layer.confirm('您确定要退出系统吗？',{ btn:['确定','取消'] }, function () { window.location.href="/logout"; }); } </script> </body> </html>
css的代码
body{
line-height: 24px;
font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
.header-demo{
height: 60px;
border-bottom: none;
}
.site-demo-title{
position: fixed;
left: 200px;
right: 0;
top: 65px;
}
body .layui-layout-admin .site-demo{
bottom: 60px;
padding: 0;
}
.layui-layout-admin .site-demo-body{
top: 106px;
}
.footer{
text-align: center;
font-weight: 300;
color: #666666;
}
#manager{
color: white;
}
重点来了，js的代码：
layui.use(['element','layer'],function () { var element = layui.element; var layer = layui.layer; //触发事件 var active = { tabAdd: function (url,id,name) { element.tabAdd('demo',{ title:name, content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="/admin/'+url+'" style="100%;height:99%;"></iframe>', id:id }); // CustomRightClick(id); // FrameWH();//计算iframe层的大小 }, tabChange:function (id) { element.tabChange('demo',id); }, tabDelete:function (id) { element.tabDelete('demo',id); } }; //当点击site-demo-active属性的标签时，即左侧菜单栏中的内容，触发事件 $(".site-demo-active").on('click',function () { console.log("11111111"); var dataid = $(this); //这时候要判断右侧的.layui-tab-title属性下的lay-id的li的数目，已经打开的tab的数量 if($(".layui-tab-title li[lay-id]").length<= 0){ //比零小，则直接打开新的tab项 active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title")); }else{ //判断该tab项是否以及存在 var isData = false;//初始化一个标志，为false说明未打开该tab项 $.each($(".layui-tab-title li[lay-id]"),function () { if($(this).attr("lay-id") === dataid.attr("data-id")){ isData = true; } }); if (isData === false){ //标志为false，新增一个tab active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title")); } } active.tabChange(dataid.attr("data-id")); }); });
js就实现了，切换的功能，很简陋，等有空了再加点功能