小程序运营教程_bootstrap

bootstrap-closable-tab可实现关闭的tab标签页插件       这篇文章主要为大家详细介绍了bootstrap-closable-tab可实现关闭的tab标签页插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码，供大家参考，具体内容如下

这是从网上找的一款可以关闭的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 = ' li role="presentation" class="" id="'+id+'" a href="#'+container+'" rel="external nofollow" role="tab" data-toggle="tab" '+tabItem.name;
 if(tabItem.closable){
 li_tab = li_tab + ' i tabclose="'+id+'" /i /a /li 
 }else{
 li_tab = li_tab + ' /a /li 
 var tabpanel = ' div role="tabpanel" id="'+container+'" '+
 '正在加载...'+
 ' /div 

 $('.tab-content').append(tabpanel);
 $('#'+container).load(tabItem.url,function(response,status,xhr){
 if(status=='error'){//ess和error，如果error则显示一个错误页面
 $((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');
<','closable':false};
closableTab.addTab(item);

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。