如何动态增加删除tab页

使用的bootstrap3 + jquery

增加tab页

function addTabs(Main,contentName,className,html,tabName) {

    var str; //  className(自定义命名名字)+后缀数字

    var val;//  获取class类名的值

    var mainLi =$("#"+Main);

    //取ul下li的个数，即tab的个数

    var length = mainLi.children().length;

    //maxTab 为全局变量，默认值为 1，即首页。增加页采取的策略  是 不断递增，即使删除，尾号也会增加

    maxTab =maxTab +1;

    str =  className+(maxTab).toString();

    val =$('.'+str).val();

    //创建li

    var li =document.createElement("li");

    li.setAttribute("class",str);

    //创建a

    var a =document.createElement('a');

    a.setAttribute("class",str);

    a.setAttribute("href","#"+str);

    a.setAttribute("data-toggle","tab");

    a.setAttribute('display',"inline");

    //创建div

    var Adiv =document.createElement('div');

    //创建span

    var span =document.createElement('span');

    span.setAttribute("id",str+"Text");

    span.setAttribute("float","left");

    span.setAttribute("display","inline");

    //创建button

    var btn =document.createElement('button');

    btn.setAttribute("type","button");

    btn.setAttribute("class","close");

    //为button定义一个方法  参数为str

    var close ="closeAddTab(" +str +")";

    btn.setAttribute("onclick",close);

    btn.setAttribute("aria-hidden","true");

    btn.setAttribute("aria-hidden","true");

    btn.setAttribute("display","inline");

    //定义一个btn里的span

    var btnSpan =document.createElement('span');

    btnSpan.setAttribute("id",str+"Span");

    btnSpan.setAttribute("display","inline");

    //追加

    btn.appendChild(btnSpan);

    Adiv.appendChild(span);

    Adiv.appendChild(btn);

    a.appendChild(Adiv);

    li.appendChild(a);

    mainLi[0].appendChild(li);

    //设置tab名字

    $("#"+str+"Text").text(tabName);

    $("#"+str+"Span").html("×");

    //生成 内容页

    var mainDiv =$("#"+contentName);

    //创建 子tab内容页

    var div =document.createElement('div');

    div.setAttribute("class","tab-pane fade");

    div.setAttribute("id",str);

    //内容页

    var div2 =document.createElement('div');

    div2.setAttribute("id",str+"Son");

    //追加

    div.appendChild(div2);

    mainDiv[0].appendChild(div);

    //设置 内容的html

    $("#"+str+"Son").html(html);

    $('.'+str).css("float","left");

    //显示最后一个，即新打开的页面

    $('#'+Main+" a:last").tab('show');

}

关闭tab页

function closeAddTab(Main,str,className) {

//str 来自addtabs创建，会带入一个select,获取它的名字

    str = str.id.toString().trim();

    var lastNum;

    var str2 = str;

    //获取 className的长度

    var len =Number(str.substring(className.length));

    var tab;

    var val;

    var last =$('#'+Main+' a:last')[0].getAttribute("class").trim();

    lastNum = last.toString().substring(className.length);

    lastNum =Number(lastNum);

    //获取 tab页尾号

    if (len === lastNum) {

for (let i = len -1; i >0; i--) {

val ='.' + className + i.toString();

            val =$(val).val();

            if (val !==undefined) {

str ="#"+className + i.toString();

                tab ='#'+Main+' a[href="' + str +'"]';

break;

            }

}

}

var length =$("#"+Main).children().length;

    var str3 ="."+str2;

    var str4 ="#"+str2;

    //移出

    $(str3).remove();

    $(str4).remove();

    //如果只有2个页面，则会到首页，多个则会到前面的一个

    if (length ===2){

$('#'+Main+' a:first').tab('show')

}else {

$(tab).tab('show');

    }

}

获取激活页

// 获取当前 active 的tab页

function getTabNum() {

var tabNum;

    if (maxTab ===2){

tabNum =maxTab;

    }else {

var active =$('.active').children()[0].getAttribute('class');

        tabNum = active.toString().substring(className.length);

    }

return tabNum;

}