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

Posted 2023-03-24

 /**
  * 增加标签页
  */
 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 + \'"   frameborder="no" border="0" margin margin 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;
  参考技术A 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;