侧导航加带删除按钮选项卡基于layui

导入layui和jq的包

html代码

 <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="navigation_blog">

            </ul>
        </div>
    </div>　

选项卡

 <div class="layui-tab" lay-allowClose="true" style="position: absolute;left: 200px;top: 60px" >
        <ul class="layui-tab-title" id="tableOption">

        </ul>
        <!-- 内容主体区域 -->
        <div class="layui-tab-content" id="subject">
          <!--  <div class="layui-tab-item" style="height: 80%;display: block;"></div>-->
        </div>
    </div>

<script>
    var i = 0;
    var element;
    layui.use('element', function(){
        element = layui.element;
        element.on('tab(demo)', function(data){
        });
    });
    $(function () {

        $.ajax({
            url:"",
            type:"get",
            dataType:"json",
            success:function (e) {
                // alert(e);
                if (e.code == 0) {
                    for (var i = 0; i< e.data.length;i++){
                        $("#navigation_blog").append("<li class='layui-nav-item' id='"+e.data[i].url+"'><a>"+e.data[i].textName+"</a></li>");
                        $("#"+e.data[i].url).on("click",function (e) {
                            var Uarry = $("#tableOption li");
                            var booleans = true;
                            var thisId;
                            debugger
                            for (var j = 0;j <Uarry.length;j++) {
                               if ($(this).attr("id") == $("#tableOption li").eq(j).attr("name")) {
                                   removeClassAll();
                                   booleans = false;
                                   thisId = $("#tableOption li").eq(j).attr("name");
                               }
                            }
                            if (booleans) {
                                doLodUi(this);
                            }else {
                                $("#tableOption li [name="+thisId+"]").addClass("layui-show");
                            }

                        });
                    }
                }
            },
            error:function (e) {
                layer.msg("网络错误",{time:3000});
            }
        })
    });
    function doLodUi(id) {
        removeClassAll();
        var text = $(id).text();
        var textId = $(id).attr("id");
        $("#tableOption").append(" <li class='layui-this' lay-id='"+i+"' name='"+textId+"'>"+text+"</li>");
        $("#subject").append("<div class='layui-tab-item layui-show' name='"+textId+"'></div>");
        doUI();
        element.init();
    }
    //  清除显示class
    function removeClassAll() {
        var divAll = $("#subject div");
        for (var i =0;i<divAll.length;i++) {
            $("#tableOption li").eq(i).removeClass("layui-this");
            $("#subject div").eq(i).removeClass("layui-show");
        }
    }
    //扫描 layui-this的li
    function doUI() {
        var divAll = $("#subject div");
        debugger
        for (var i =0;i<divAll.length;i++) {
            // $("#tableOption li").eq(i).is("")
            let boole = $("#subject div").eq(i).is(".layui-show");
            if (boole) {
                let url = $("#subject div").eq(i).attr("name");
                $("#subject div").eq(i).load("/backstage/"+url);
            }
        }
    }

</script>