好的，我可以帮你实现这个功能。
首先，你需要在页面中引入
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选项卡的代码了，你可以根据自己的需求进行修改。
最低0.47元/天 解锁文章
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
