好的，我可以帮你实现这个功能。
首先，你需要在页面中引入
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
选项卡的代码了，你可以根据自己的需求进行修改。
这篇博客展示了如何使用layui动态添加菜单和选项卡，提供了具体的代码实例，并附有菜单JSON数据。文章还提到了相关专题学习资源，如javascript和jquery的选项卡操作方法汇总。
最低0.47元/天 解锁文章
扫一扫
1798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
