Question

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

Answer 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('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this);">×</button>'+options.tabTitle+'</a></li>');
         
         //固定TAB中IFRAME高度
         mainHeight = $(document.body).height() - 5;
         
         var content = '';
         if(options.content){
             content = option.content;
         } else {
             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>';
         }
         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>');
         $("#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;
 }

Answer 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('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this);">×</button>'+options.tabTitle+'</a></li>'); //固定TAB中IFRAME高度 mainHeight = $(document.body).height() - 5; var content = ''; if(options.content){ content = option.content; } else { content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'; } $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>'); $("#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; }