js写tab；可以使用bootstrap-closable-tab可关闭的tab标签页

使用方法
引入bootstrap-closable-tab.js文件
在需要显示标签的位置如下代码

<!-- 此处是相关代码 -->
<ul class="nav navTabs" role="tablist">
</ul>
<div class="tabContent" style="width:100%;">
</div>
<!-- 相关代码结束 -->

执行bootstrap-closable-tab.js中的方法
closableTab.addTab(item);
参数item是一个数组 {id,name,url,closable}
id tab标签的id，不允许重复；
name tab便签上面显示的标题；
tab 标签页里面要加载的页面（不支持跨域访问);
closalbe boolean类型，是否显示关闭图标。

Example
var item = {‘id’:’1’,’name’:’首页’,’url’:’son.html’,’closable’:false};
closableTab.addTab(item);

以上是使用bootstrap-closable-tab.js方法；

bootstrap-closable-tab原理：

每次添加调用 closableTab.addTab(item) 生成一个div标签，标签中存放内容（url的地址页面）；达到tab效果；但是有时候我们不想在写一个页面，如果有个搜索的场景每次生成tab还需要带参到页面，容易出错误，

在这我借用bootstrap-closable-tab 自己写的方法

场景需求：

每次搜索生成一个tab页，每个tab之间可以来回切换，也可以关闭，每次关闭某一个tab都选中最后一个，但是只有一个是不能关闭；
逻辑：每搜索一次生成一个标签，通过每次生成不同的id来绑定 tab内容 ；只有一个div来存放数据，每次切换tab相当于清空tab内容，通过绑定的id和参数重新调用接口重新填充内容；不同于bootstrap-closable-tab方法，不需要每次都生成一个tab来存放内容

//搜索框 ，每搜索一次生成一个tab页面
<div id="dataCont">
    <input id="searchInput" placeholder="请输入警情编号，关键词等内容">       <button id="getSearch">搜索</button>
</div>

//存放生成的的tab  ---- 我只生成一个tab
<div>
    <ul class="nav nav-tabs" role="tablist">
    </ul>
    <div  class="tab-content" style="width:100%;">
    </div>
</div>
 var index = 0；
$('#getSearch').on('click',function () {  //搜索事件
    keyword = $('#searchInput').val(); //获取输入框内容
    if(keyword){ //name标题  以搜索的内容为tab名字
        keyword = keyword
    }
    else {
        keyword = '全部'  //搜索条件为空时 以“全部”为tab名字
    }
    index++; //index 每个tab 绑定不同
    var item = {'id':index,'name':keyword,'closable':true};
    addTab(item);
});
//添加标签
function addTab(tabItem){ //tabItem = {id,name,closable} 
    $('.nav-tabs li').children("i").css('display','block') //找到tab中 放在 i标签的 ‘x’ 关闭按钮 初始化显示 --- 这是为了写等就只有一个tab页 关闭按钮隐藏效果；
    //已下生成标签
    var id = "tabSeed" + tabItem.id;
    var container ="tabContainer" + tabItem.id;
    $("li[id^=tab_seed_]").removeClass("active");
    $("div[id^=tab_container_]").removeClass("active");
    if(!$('#'+id)[0]){
        var li_tab = '<li role="presentation" class="" id="'+id+'">' +
           //给每一个 a标签绑定点击事件 switchTab()  (解释为什么不把事件绑定到li标签上，因为在关闭的时候也需要绑定事件，所以避免切换的标签事件(tab内容)和关闭事件相互影响)
           '<a href="#'+container+'" onclick="switchTab('+tabItem.id+',\''+keyword+'\')" role="tab" data-toggle="tab" style="position: relative;padding:2px 20px 2px 15px">'+tabItem.name+'</a>';
        if(tabItem.closable){
        //关闭标签 关闭事件closeTab()
            li_tab = li_tab + '<i class="glyphicon glyphicon-remove small" tabclose="'+id+'" style="position: absolute;right:4px;top: 4px;"  onclick="closeTab(this)"></i></li> ';
        }else{
            li_tab = li_tab + '</li>';
        }
        $('.nav-tabs').append(li_tab);
        switchTab(tabItem.id, keyword);
    }
    $("#"+id).addClass("active");
    $("#"+container).addClass("active");
}
//每个tab切换方法  生成方法   点击事件选中点击的<li>标签 
  function switchTab(tabContainerId, keyword){
    var container ="tabContainer" + tabContainerId;
    var tabSeed = "tabSeed" + tabContainerId;
    $('.nav-tabs').find('li').each(function() {
        $(this).removeClass("active");
    });
    $("#"+tabSeed).addClass("active");
    loadTable(container, keyword);
    $('#'+container).show();
}
//tab里面的内容 方法
 function loadTable(container, keyword){
    var s = '<div role="tabpanel" class="tab-pane" id="'+container+'" style="width: 100%;">'+
        '正在加载...'+
        '</div>';
    $('.tab-content').empty().append(s); //每次先清空 tab里面的内容 在调用放发生成
    redListYoyFindByPages(keyword,container); //redListYoyFindByPages方法是 你需要放入tab里面的内容  
}
//关闭tab
 function closeTab(item){
    var val = $(item).attr('tabclose');
    $("#"+val).unbind( "click" ).remove();
    //移除tab <li/>标签
    //判断是否只有一个tab
    if($('.nav-tabs li').length == '1'){
        $('.nav-tabs li:last-child').children("i").css('display','none')
    } else {
        $('.nav-tabs li').children("i").css('display','block')
    }
    //每次移除触发都会一个tab点击事件  选中
     $('.nav-tabs li:last-child').children("a").click();
}
function redListYoyFindByPages(keyword,container){
  内容
}