如何动态增加删除tab页

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

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

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

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

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

    var length = mainLichildren()length;

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

    maxTab =maxTab +1;

    str =  className+(maxTab)toString();

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

    //创建li

    var li =documentcreateElement("li");

    lisetAttribute("class",str);

    //创建a

    var a =documentcreateElement('a');

    asetAttribute("class",str);

    asetAttribute("href","#"+str);

    asetAttribute("data-toggle","tab");

    asetAttribute('display',"inline");

    //创建div

    var Adiv =documentcreateElement('div');

    //创建span

    var span =documentcreateElement('span');

    spansetAttribute("id",str+"Text");

    spansetAttribute("float","left");

    spansetAttribute("display","inline");

    //创建button

    var btn =documentcreateElement('button');

    btnsetAttribute("type","button");

    btnsetAttribute("class","close");

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

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

    btnsetAttribute("onclick",close);

    btnsetAttribute("aria-hidden","true");

    btnsetAttribute("aria-hidden","true");

    btnsetAttribute("display","inline");

    //定义一个btn里的span

    var btnSpan =documentcreateElement('span');

    btnSpansetAttribute("id",str+"Span");

    btnSpansetAttribute("display","inline");

    //追加

    btnappendChild(btnSpan);

    AdivappendChild(span);

    AdivappendChild(btn);

    aappendChild(Adiv);

    liappendChild(a);

    mainLi[0]appendChild(li);

    //设置tab名字

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

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

    //生成 内容页

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

    //创建 子tab内容页

    var div =documentcreateElement('div');

    divsetAttribute("class","tab-pane fade");

    divsetAttribute("id",str);

    //内容页

    var div2 =documentcreateElement('div');

    div2setAttribute("id",str+"Son");

    //追加

    divappendChild(div2);

    mainDiv[0]appendChild(div);

    //设置 内容的html

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

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

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

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

}
function closeAddTab(Main,str,className) {

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

    str = stridtoString()trim();

    var lastNum;

    var str2 = str;

    //获取 className的长度

    var len =Number(strsubstring(classNamelength));

    var tab;

    var val;

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

    lastNum = lasttoString()substring(classNamelength);

    lastNum =Number(lastNum);

    //获取 tab页尾号

    if (len === lastNum) {

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

val ='' + className + itoString();

            val =$(val)val();

            if (val !==undefined) {

str ="#"+className + itoString();

                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 = activetoString()substring(classNamelength);

    }

return tabNum;

}

1 在ul标签里面引入nav nav-tab的类即可实现相应的tab栏样式 其中 要为第一个li 标签添加active类名 以实现tab栏的切换
2 两种启用tab栏的方法 (1)data-tag或者data-pill属性到锚文本链接中(2) 通过JavaScript调用方法来启用
3 如果需要为标签页设置一个淡入淡出的效果 为每一个标签的 tab-pane类名后面 添加 fade 类名 并且在第一个标签添加in 这个类名 以至于第一次初始化的时候进行 ''淡入''效果
4 逻辑很重要!!!
刚刚看到有人说它的原理:
1单击一个元素的时候 将其他元素的高亮取消
2将当前点击的元素进行高亮显示
3如果单击的是某一个元素或者下拉的是某一 则进行本身+子元素选中
4如果定义了动画 先执行动画再进行回调

楼上的有一半答对了\r\nul是无序排列\r\nol才是有序排列\r\nli是他们的子列\r\nul ol li 是很好用的几个东西\r\n现在大部分都用到它\r\n不过他们前面的那些个点和序号就不那么雅观了\r\n所以我们要定义一个CSS把它去掉\r\nlist-style-type:none;（去掉序号和前面的点） margin:0px;（页边空白为0）text-align:left;（文本左对齐）\r\n这样我们用li定义出来的东西就能去掉前面的点或者序号还能左对齐，当然你可以居中，右对齐等等

$(function(){
$("#Tab ul > li")click(function(){
$(this)addClass("current")siblings()removeClass("current");
})
}) //给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单

---