js实现点击按钮动态添加与删除layui的Tab选项卡

好的，我可以帮你实现这个功能。 首先，你需要在页面中引入layui库和jquery库： ```html <!-- 引入layui库 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script> <!-- 引入jquery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 然后，你需要在页面中添加一个按钮和一个容器，用于存放选项卡： ```html <button id="add-tab">新增选项卡</button> <div class="layui-tab" lay-filter="tab-demo"> <ul class="layui-tab-title"> <li class="layui-this">选项卡1</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> </div> </div> ``` 接下来，你需要编写js代码来实现点击按钮动态添加与删除选项卡的功能： ```javascript // 初始化选项卡 layui.use('element', function(){ var element = layui.element; }); // 点击按钮新增选项卡 $('#add-tab').click(function() { var title = '选项卡' + ($('.layui-tab-title li').length + 1); // 新增选项卡的标题 var content = '内容' + ($('.layui-tab-content .layui-tab-item').length + 1); // 新增选项卡的内容 var tabTpl = '<li lay-id="{id}" class=""><a href="javascript:;">{title}</a></li>'; // 选项卡模板 var contentTpl = '<div class="layui-tab-item">{content}</div>'; // 选项卡内容模板 var id = new Date().getTime(); // 选项卡的唯一标识 var tabHtml = tabTpl.replace(/{id}/g, id).replace(/{title}/g, title); // 替换选项卡模板中的占位符 var contentHtml = contentTpl.replace(/{content}/g, content); // 替换选项卡内容模板中的占位符 $('.layui-tab-title').append(tabHtml); // 添加选项卡 $('.layui-tab-content').append(contentHtml); // 添加选项卡内容 layui.use('element', function(){ var element = layui.element; element.tabAdd('tab-demo', { title: title, content: content, id: id }); }); }); // 点击选项卡上的关闭按钮删除选项卡 $('body').on('click', '.layui-tab-title li i', function() { var id = $(this).parent().attr('lay-id'); // 获取选项卡的唯一标识 layui.use('element', function(){ var element = layui.element; element.tabDelete('tab-demo', id); // 删除选项卡 }); }); ``` 以上代码中，我们使用了`layui.element`模块来实现选项卡的添加和删除。在新增选项卡时，我们使用了模板字符串和正则表达式来替换占位符，生成选项卡和选项卡内容的html代码。在删除选项卡时，我们使用了事件委托的方式来绑定事件，以便于处理动态生成的选项卡。 好了，以上就是实现点击按钮动态添加与删除layui的Tab选项卡的代码了，你可以根据自己的需求进行修改。