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

 /**

  * 增加标签页

  */

 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

 }

1 在ul标签里面引入nav nav-tab的类即可实现相应的tab栏样式 其中 要为第一个li 标签添加active类名 以实现tab栏的切换

2 两种启用tab栏的方法 (1)data-tag或者data-pill属性到锚文本链接中(2) 通过JavaScript调用方法来启用

3 如果需要为标签页设置一个淡入淡出的效果 为每一个标签的 tab-pane类名后面 添加 fade 类名 并且在第一个标签添加in 这个类名 以至于第一次初始化的时候进行 ''淡入''效果

4 逻辑很重要!!!

刚刚看到有人说它的原理:

1单击一个元素的时候 将其他元素的高亮取消

2将当前点击的元素进行高亮显示

3如果单击的是某一个元素或者下拉的是某一 则进行本身+子元素选中

4如果定义了动画 先执行动画再进行回调

项目要求在既有的clever框架上实现动态的tab页加载，在tab页切换时能保持每个tab页的状态，也就是做了哪些修改神马的。

然而原有clever框架上的Tab页是静态的，最开始尝试了用 *ngIf控制tab的是否加载，但出现的问题是无论点击的顺序是什么，这些tab页全都保持了一致的顺序，很显然被毙掉了。

继续在网上找方法，因为现在用的这套clever是基于Bootstrap的，于是去看Bootstrap的文档，文档中给的动态加载Tab要是这样的：

这样的实现方式是说：每当你增加或者删除一个tab选项页，会执行一次*ngFor，重新加载一次所有的页，这就说明并不会保持状态，而且每点一个就全部加载一次所有数据，显然又会被毙掉了。

经历了一次次的折磨，在师哥的帮助下，写出了一种实现方式。最终的效果是这样的：

首先，改变了原来clever的路由组织结构，原来是appRouting下引各个一级Module，在各个一级模块的Routing下引各个二级Component，现在的做法是，在中间加了一个空组件，这里是filling组件，把所有路由引到这个空组件上去，这个空组件通过动态加载组件的方式加载每次点击tab页需要加载的组件。

这里的tabArray和activeIndex数组都是filling组件和full-layout组件共同维护的，full-layout组件是嵌套在clever最外层的框架。full-layout组件如下：

---