bootstrap动态添加Tab标签页-白红宇

好久没有写博客了（主要是懒），工作中用到一个动态添加Tab的功能，众所周知，bootstrap没有动态添加Tab的功能，网上又没找到什么好用的，那咱就自己写呗？（因为懒，所以只写了添加的方法.(๑>؂<๑)۶）

github地址：https://github.com/renruiquan/bootstrap-dynamic-tabs

不废话了，我就直接上代码了。

bootstrap-dynamic-tabs.js源码如下：

$.fn.addTabs = function (options) {    //判断是否已存在指定ID的tab    if ($("#" + options.id).length > 0) {        throw "当前ID的Tab已存在．";    }    //构建li元素    var li = $("
", {        "id": options.id + "-li",    });    //构建a元素    var a = $("", {        "href": "#" + options.id,        "text": options.title,        "click": function () {            $(this).tab("show");        }    });    //合并li和a元素    li.append(a);    var ul = $(this);    //合并ul和li元素    ul.append(li);    //添加完成显示当前li    $(li).tab("show");    //构建div内容元素    var div = $("
     
", {        "id": options.id,        "class": "tab-pane fade in active",    });    //兼容纯文本和html片段    typeof options.content == "string" ? div.append(options.content) : div.html(options.content);    var container = $(".tab-content");    container.append(div);    //添加完成后显示div    $(div).siblings().removeClass("active");}

调用的代码和html的代码：

    
         bootstrap-动态添加Tab    
         
         
         
             
                  
                       
                    
       
        
      
        
                  
                       
                        
                            
                                 
            Home  
                        
            Messages  
                    
         
                    
                                 
           
           Raw denim you probably haven't heard of them jean shorts Austin.
 
          
                        
           
           Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

这里我用了ace-admin的样式，最后运行的截图如下：

那啥……忘了说了，要用IIS等Web容器跑，因为我这里用了ajax请求，动态加载远程的html文件了，如果你不想用的话，就把红色的代码删掉吧~