有没有Bootstrap3.3 动态添加和关闭 tab的方案

2025-04-13 14:04:20

推荐回答（2个）

回答1：

 /**
  * 增加标签页
  */
 function addTab(options) {
     //option:
     //tabMainName:tab标签页所在的容器
     //tabName:当前tab的名称
     //tabTitle:当前tab的标题
     //tabUrl:当前tab所指向的URL地址
     var exists = checkTabIsExists(options.tabMainName, options.tabName);
     if(exists){
         $("#tab_a_"+options.tabName).click();
     } else {
         $("#"+options.tabMainName).append('×'+options.tabTitle+'');
         
         //固定TAB中IFRAME高度
         mainHeight = $(document.body).height() - 5;
         
         var content = '';
         if(options.content){
             content = option.content;
         } else {
             content = '';
         }
         $("#"+options.tabContentMainName).append(''+content+'

');
         $("#tab_a_"+options.tabName).click();
     }
}

/**
  * 关闭标签页
  * @param button
  */
function closeTab (button) {

     //通过该button找到对应li标签的id
     var li_id = $(button).parent().parent().attr('id');
     var id = li_id.replace("tab_li_","");

     //如果关闭的是当前激活的TAB，激活他的前一个TAB
     if ($("li.active").attr('id') == li_id) {
         $("li.active").prev().find("a").click();
     }

     //关闭TAB
     $("#" + li_id).remove();
     $("#tab_content_" + id).remove();
};

/**
  * 判断是否存在指定的标签页
  * @param tabMainName
  * @param tabName
  * @returns {Boolean}
  */
function checkTabIsExists(tabMainName, tabName){
     var tab = $("#"+tabMainName+" > #tab_li_"+tabName);
     //console.log(tab.length)
     return tab.length > 0;
}

回答2：

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 /** * 增加标签页 */ function addTab(options) { //option: //tabMainName:tab标签页所在的容器 //tabName:当前tab的名称 //tabTitle:当前tab的标题 //tabUrl:当前tab所指向的URL地址 var exists = checkTabIsExists(options.tabMainName, options.tabName); if(exists){ $("#tab_a_"+options.tabName).click(); } else { $("#"+options.tabMainName).append('

'+options.tabTitle+'

'); //固定TAB中IFRAME高度 mainHeight = $(document.body).height() - 5; var content = ''; if(options.content){ content = option.content; } else { content = ''; } $("#"+options.tabContentMainName).append('

'+content+'

'); $("#tab_a_"+options.tabName).click(); } } /** * 关闭标签页 * @param button */ function closeTab (button) { //通过该button找到对应li标签的id var li_id = $(button).parent().parent().attr('id'); var id = li_id.replace("tab_li_",""); //如果关闭的是当前激活的TAB，激活他的前一个TAB if ($("li.active").attr('id') == li_id) { $("li.active").prev().find("a").click(); } //关闭TAB $("#" + li_id).remove(); $("#tab_content_" + id).remove(); }; /** * 判断是否存在指定的标签页 * @param tabMainName * @param tabName * @returns {Boolean} */ function checkTabIsExists(tabMainName, tabName){ var tab = $("#"+tabMainName+" > #tab_li_"+tabName); //console.log(tab.length) return tab.length > 0; }