先来看个效果图（文章底部有gitee地址）
要实现的效果：
OK，直接上代码，一些引入文件就不写了，这里只列出主要的代码，有需要的话可以去Gitee自行下载。
布局：
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<a href="">
<div class="layui-logo" style="color: #FFFFFF;">选项卡Demo</div>
</a>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:void(0);">用户管理</a>
<dl class="layui-nav-child">
<dd><a data-url="userInfo.html" data-id="11" data-title="个人中心" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">个人中心</a></dd>
<dd><a data-url="password.html" data-id="12" data-title="修改密码" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">修改密码</a></dd>
<dd><a data-url="userList.html" data-id="13" data-title="用户列表" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">用户列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:void(0);">系统管理</a>
<dl class="layui-nav-child">
<dd><a data-url="notice.html" data-id="21" data-title="公告管理" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">公告管理</a></dd>
<dd><a data-url="security.html" data-id="22" data-title="安全中心" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">安全中心</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 选项卡和内容区 -->
<div class="layui-tab" lay-filter="home-tabs" lay-allowclose="true" style="margin: 0 0 0 200px;">
<ul class="layui-tab-title"></ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="refresh">刷新</li>
<li data-type="closeOthers">关闭其他</li>
<li data-type="closeRight">关闭右侧所有</li>
<li data-type="closeAll">关闭所有</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
<!-- 底部固定区域 -->
<div class="layui-footer" style="text-align: center">
底部固定区域
</div>
</div>
</body>js：（注：选项卡需要依赖element模块）
<script type="text/javascript">
layui.use('element', function () {
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function (url, id, name) {
//新增一个Tab项 传入三个参数，分别是tab页面的地址，还有一个规定的id，对应其标题，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd('home-tabs', {
title: name,
content: '<iframe id="aaa" data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
'" style="width:100%;height:99%;"></iframe>',
id: id //规定好的id
})
//通过鼠标mouseover事件 动态将新增的tab下的li标签绑定鼠标右键功能的菜单
//下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据
$(".layui-tab-title li[lay-id=" + id + "]").mouseover(function () {
var tabId = $(this).attr("lay-id");
CustomRightClick(tabId); //给tab绑定右击事件
FrameWH(); //计算ifram层的大小
});
},
tabChange: function (id) {
//切换到指定Tab项
element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项
},
tabDelete: function (id) {
element.tabDelete('home-tabs', id); //删除
},
tabRefresh: function (id) { //刷新页面
$("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //刷新框架
}
};
//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function () {
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项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
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"));
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});
function CustomRightClick(id) {
//取消右键 rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
$('.layui-tab-title li').on('contextmenu', function () {
return false;
})
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
});
//单击取消右键菜单
$('body,#aaa').click(function () {
$('.rightmenu').hide();
});
//tab点击右键
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性
//判断右侧菜单的位置
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({
left: l,
top: t
}).show(); //进行绝对定位
return false;
});
}
$(".rightmenu li").click(function () {
//当前的tabId
var currentTabId = $(this).attr("data-id");
if ($(this).attr("data-type") == "closeOthers") { //关闭其他
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
if ($(this).attr("lay-id") != currentTabId) {
active.tabDelete($(this).attr("lay-id"))
}
})
} else if ($(this).attr("data-type") == "closeAll") { //关闭全部
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})
} else if ($(this).attr("data-type") == "refresh") { //刷新页面
active.tabRefresh($(this).attr("data-id"));
} else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有
//找到当前聚焦的li之后的所有li标签 然后遍历
var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})
}
$('.rightmenu').hide();
});
//导航栏点击选中时关闭其他选项卡
$('.layui-nav-item').click(function () {
$(this).siblings('li').attr('class', 'layui-nav-item');
});
function FrameWH() {
var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
$("iframe").css("height", h + "px");
}
$(window).resize(function () {
FrameWH();
})
//打开默认页面
active.tabAdd("userInfo.html", 11, "个人中心");
active.tabChange(11);
});
</script>