本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码，供大家参考，具体内容如下Demo下载地址：bootstrapclosabletab_.rarbootstrapclosabletab_.rar这是从网上找的一款可以关闭的tab标签页插件：1、这是基于bootstrap的插件，因此要引入bootstrap的相关插件前提得引入jquery：2、引入该插件：代码如下：
//子页面不用iframe，用div展示
var closableTab = {


//添加tab
addTab:function(tabItem){ //tabItem = {id,name,url,closable}

var id = "tab_seed_" + tabItem.id;
var container ="tab_container_" + tabItem.id;

$("li[id^=tab_seed_]").removeClass("active");
$("div[id^=tab_container_]").removeClass("active");

if(!$('#'+id)[0]){

var li_tab = ' ';

}else{

li_tab = li_tab + '';

}


var tabpanel = '
'+

'正在加载...'+

'
';



$('.nav-tabs').append(li_tab);

$('.tab-content').append(tabpanel);

$('#'+container).load(tabItem.url,function(response,status,xhr){

if(status=='error'){//status的值为success和error，如果error则显示一个错误页面

$(this).html(response);

}

});
}
$("#"+id).addClass("active");
$("#"+container).addClass("active");
},

//关闭tab
closeTab:function(item){
var val = $(item).attr('tabclose');
var containerId = "tab_container_"+val.substring(9);



if($('#'+containerId).hasClass('active')){

$('#'+val).prev().addClass('active');

$('#'+containerId).prev().addClass('active');

}


$("#"+val).remove();
$("#"+containerId).remove();
}
}
//子页面不用iframe，用div展示
var closableTab = {


//添加tab
addTab:function(tabItem){ //tabItem = {id,name,url,closable}

var id = "tab_seed_" + tabItem.id;
var container ="tab_container_" + tabItem.id;

$("li[id^=tab_seed_]").removeClass("active");
$("div[id^=tab_container_]").removeClass("active");

if(!$('#'+id)[0]){

var li_tab = ' ';

}else{

li_tab = li_tab + '';

}


var tabpanel = '
'+

'正在加载...'+

'
';



$('.nav-tabs').append(li_tab);

$('.tab-content').append(tabpanel);

$('#'+container).load(tabItem.url,function(response,status,xhr){

if(status=='error'){//status的值为success和error，如果error则显示一个错误页面

$(this).html(response);

}

});
}
$("#"+id).addClass("active");
$("#"+container).addClass("active");
},

//关闭tab
closeTab:function(item){
var val = $(item).attr('tabclose');
var containerId = "tab_container_"+val.substring(9);



if($('#'+containerId).hasClass('active')){

$('#'+val).prev().addClass('active');

$('#'+containerId).prev().addClass('active');

}


$("#"+val).remove();
$("#"+containerId).remove();
}
}3、html代码：



























4、使用方法如下：
var item = {'id':'1','name':'菜单管理','url':'./menuctrl.html','closable':false};
closableTab.addTab(item);
var item = {'id':'1','name':'菜单管理','url':'./menuctrl.html','closable':false};
closableTab.addTab(item);如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：这里Bootstrap学习教程Bootstrap学习教程Bootstrap实战教程Bootstrap实战教程Bootstrap Table使用教程Bootstrap Table使用教程Bootstrap插件使用教程Bootstrap插件使用教程以上就是本文的全部内容，希望对大家的学习有所帮助。