如何动态添加tab页

$("#tab").tabs(".tabContent", {

tabs: "input"

})

试试把这上面的 tabs 功能定义为一个 function

例如

function tabs_run() {

....

}

然後在 click function 里面捕捉 event 完结时侯再次呼叫这个 tabs_run()

例如

$('#add').live('click', function() {

.....

tabs_run()

}

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')

}

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 -1i >0i--) {

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

}

先给出示例html代码

<div>

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" id="contentnavid">

<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>

<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>

<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>

<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>

<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>

</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>

<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>

<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>

<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>

</div>

</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。

具体示例代码如下：

<script>

var activeTab = "tab1"//当前的tab页。默认为第一个tab页。

var previousTab //上一个打开的tab页。默认为空。

$(function(){

//实现事件响应函数，当tab页被显示时会触发

$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {

//获取当前被显示的tab页标签的aria-controls属性值

activeTab = $(e.target).attr("aria-controls")

//获取前一个被显示的tab页标签的aria-controls属性值

previousTab = $(e.relatedTarget).attr("aria-controls")

})

//点击带关闭按钮tab页标签上的x后的响应事件

$("#closetabbtn").click(function(e){

$(this).parent().parent().css("display","none")//隐藏tab头，调用remove方法就是删除了

$("#closetab").css("display","none")//隐藏tab正文信息，调用remove方法就是删除了

if(activeTab=="closetab"){ //判断当前tab页是否是带关闭按钮的tab页，如果是，则显示上次打开的tab页

$(‘#contentnavid a[href="#‘+previousTab+‘"]‘).tab(‘show‘)//显示tab页

}

return false//一定要return false，阻止事件往上冒泡

})

})

</script>

上面给出了js代码。

本文给出了最核心的处理逻辑，其中关键的地方有：

1）增加关闭按钮，并处理click事件

2）处理tab的show事件

在此基础上，可以实现各种场景下的应用。

---