首先说一下左侧菜单栏

这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发现页面是这样的：

发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在超文本标记语言代码下面导入，才可以显示，不知道是什么原因。

下面说重点，动态操作标签项

页面截图：

标签项右键菜单：

这里右键菜单的样式并没有做太多的美化。

超文本标记语言代码：(页面中关于引入射流研究…和钢性铸铁文件的部分被我省略了，还有要注意框架的引入顺序)

div class=' layui-tab layui-tab-card site-demo-button ' style=' position : relative；'ul class=' layui-nav layui-nav-tree layui-nav-side ' Li class=' layui-nav-item layui-nav-item ed ' a href=' JavaScript :'rel='外部nofollow' rel='外部' nofollow '默认展开/a dl class=' layui-nav-child ' DD a data-URL=' a ' data-id=' 11 ' data-title='选项a ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' site-demo-active '数据类型=' tabAdd '选项a/a/DD/DD a href=' # rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' data-URL=' b ' data-title='选项b ' data-id=' 22 ' class=' site-demo-active ' data-type=' tabAdd '选项b/a /dd dd a href=' '跳转/a/DD/dl/Li Li class=' layui-nav-item ' a href=' JavaScript :' rel='外部nofollow' rel='外部' nofollow '解决方案/a dl class=' layui-nav-child ' DD a href=' '移动模块/a /dd dd a href=' '后台模版/a /dd dd a href=' '电商平台/a/DD/dl/Li Li class=' layui-nav-item ' a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' data-URL=' c ' data-title='选项c ' data-id=' 33 ' class=' site-demo-active ' data-type=' tabAdd '产品c/a/Li Li class=' layui-nav-item ' a href=' '大数据/a/Li/ul div class=' layui-tab ' lay-filter=' demo ' lay-allow close=' true ' style=' margin-left : 200 px；' ul class=' layui-tab-title '/ul ul class='右菜单' style=' display : none绝对位置：'里数据类型="关闭"关闭当前/li li数据类型="全部关闭"关闭所有/Li/ul div class=' layui-tab-content '/div/div/div js代码：

layui.use('element '，function(){ var $=layui。jquery定义变量元素=layui.element//选项卡的切换功能，切换事件监听等，需要依赖元素模块//触发事件var active={ //在这里给活跃的绑定几项事件，后面可通过活跃的调用这些事件tabAdd:函数(网址、id、名称){ //新增一个标签项传入三个参数，分别对应其标题，选项卡页面的地址，还有一个规定的id，是标签中数据编号的属性值//关于tabAdd的方法所传入的参数可看获得的开发文档中基础方法部分element.tabAdd('demo '，{ title: name，content : ' iframe data-frame id=' id ' ' scrolling=' auto ' frame border=' 0 ' src=' http : ' URL ' .html " style=" width :100%；高：99%;/iframe '，id: id //规定好的id })自定义右键(id)；//给标签绑定右击事件FrameWH()；//计算ifram层的大小}，tabChange:函数(id) { //切换到指定标签项element.tabChange('demo '，id)；//根据传入的编号传入到指定的标签项}，tabDelete:函数(id) { element.tabDelete('demo '，id)；//删除}，tabDeleteAll:函数(id){//删除所有$.每个(id，函数(I，item) { element.tabDelete('demo '，item)；//ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除}) } };//当点击有现场演示活动属性的标签时，即左侧菜单栏中内容，触发点击事件$('.网站-演示-活动')。on('click ')，function(){ var dataid=$(this)；//这时会判断右侧拉威-选项卡-标题属性下的有层编号属性的里的数目，即已经打开的标签项数目if ($(').layui-tab-title li[lay-id]').长度=0) { //如果比零小，则直接打开新的标签项活跃。TabAdd(数据id。attr(' data-URL ')、dataid.attr('data-id ')、dataid。attr(' data-title ')；} else { //否则判断该标签项是否以及存在var isData=false//初始化一个标志，为错误的说明未打开该标签项为真实的则说明已有$.每个($(')。layui-tab-title li[lay-id]')，function () { //如果点击左侧菜单栏所传入的编号在右侧标签项中的层编号属性可以找到，则说明该标签项已经打开if ($(this).attr(' lay-id ')==dataid。attr(' data-id '){ IsData=true；} }) if (isData==false) { //标志为错误的新增一个标签项活跃。TabAdd(数据id。attr(' data-URL ')、dataid.attr('data-id ')、dataid。attr(' data-title ')；} } //最后不管是否新增选项卡，最后都转到要打开的选项页面上活跃。tabChange(dataid。attr(' data-id ')；});函数CustomRightClick(id) { //取消右键右菜单属性开始是隐藏的，当右击的时候显示，左击的时候隐藏$('.李说.on('contextmenu '，function(){ return false；}) $('.layui-tab-title .李说.单击(函数(){ $(').右菜单')。hide()；});//桌面点击右击$('.李说.打开(' contextmenu '，函数(e) { var popupmenu=$(').右菜单’)；popupmenu.find('li ').attr('data-id '，id)；//在右键菜单中的标签绑定编号属性//判断右侧菜单的位置l=($(文档)。width()-e . ClientX)弹出菜单。宽度()？(e . ClientX-弹出菜单。宽度()): e . ClientXt=($(文档)。height()-e . clienty)弹出菜单。高度()？(e . client y-弹出式菜单。高度()): e . clientypopupmenu.css({ left: l，top: t }).show()；//进行绝对定位//alert('右键菜单)返回false })；} $('.右菜单李' .单击(函数(){ //右键菜单中的选项被点击之后，判断类型的类型，决定关闭所有还是关闭当前。

if ($(this).attr('数据类型)===' clothis '){//如果关闭当前，即根据显示右键菜单时所绑定的id，执行选项卡删除活动。制表符删除($(this).attr(' data-id ')} else if($(this).attr('数据类型)===' close all '){ var tab title=$(' .“layui-tab-title Li’)；var id=new Array()；$.每个(tabtitle，function (i) { ids[i]=$(this)).attr(' lay-id ')；}) //如果关闭所有，即将所有的层编号放进数组，执行tab删除所有活动项。tab delete all(id)；} $('.右菜单')。hide()；//最后再隐藏右键菜单})函数FrameWH() { var h=$(window).高度()-41-10-60-10-44-10;$(“iframe”).css('height '，h ' px ')；} $(窗口)。resize(function(){ FrameWH()；}) });标签项是放在div class=' layui-tab ' lay-filter=' demo ' lay-allow close=' true ' style=' margin-left : 200 px；'这个差异中的，其中有一个重要的属性层状过滤器，在射流研究…中调用的选项卡添加，选项卡删除等多种方法都携带了这个参数，我对此的理解是相当于一个判断拦截功能，将标签项放在lay-filter="演示"的差异中。可以借助该参数，完成指定元素的局部更新。

元素上也有操作，varelement=layui.element。

元素模块的示例

返回的元素变量是这个实例的对象，携带了一些元素操作的基本方法，我们用它来添加、删除和切换标签项。

这是元素中的tabAdd方法，其中的内容可以是iframe页面。在这种情况下，我只是传递了一个简单的页面，实现了不同页面之间的一些切换。

Element.tabadd ('demo '，{title :' tab title '，content : ' tab content '//支持传入html，id:' tab title的lay-id属性值' })；上面左边的菜单栏和layui实现的动态操作标签项的方法，都是边肖分享的内容。希望能给大家一个参考，支持我们。