layui-tab-content动态添加内容

在layui中，可以通过以下代码实现layui-tab-content动态添加内容：

HTML部分：

<!--tab选项卡-->
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">选项卡1</li>
        <li>选项卡2</li>
        <li>选项卡3</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">选项卡1的内容</div>
        <div class="layui-tab-item">选项卡2的内容</div>
        <div class="layui-tab-item">选项卡3的内容</div>
    </div>
</div>

JavaScript部分：

layui.use(['element', 'layer'], function(){
    var element = layui.element;
    var layer = layui.layer;
    
    //监听tab选项卡的点击事件
    element.on('tab(test)', function(data){
        console.log(data);
    });
    
    //动态添加选项卡
    $('#addTabBtn').on('click', function(){
        var title = '选项卡4';
        var content = '选项卡4的内容';
        var index = $('.layui-tab-title li').length + 1;
        element.tabAdd('test', {
            title: title,
            content: content,
            id: index
        });
    });
    
    //动态删除选项卡
    $('#delTabBtn').on('click', function(){
        var index = $('.layui-tab-title li.layui-this').index();
        element.tabDelete('test', index);
    });
});

在上述代码中，我们使用了layui.element的tabAdd和tabDelete方法来动态添加和删除选项卡。其中，tabAdd方法需要传入一个选项卡的对象，包括title（选项卡标题）、content（选项卡内容）和id（选项卡id）。tabDelete方法则需要传入要删除的选项卡的索引。