好久没有写博客了（主要是懒），工作中用到一个动态添加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 = $("<li />", {

        "id": options.id + "-li",

    });

    //构建a元素

    var a = $("<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 = $("<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的代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>bootstrap-动态添加Tab</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css">

    <link rel="stylesheet" type="text/css" href="ace.min.css">

</head>

<body style="background-color:white;">

    <div class="container">

        <div class="row hr-16">

            <div class="col-lg-12">

                <button class="btn btn-success">添加Tab</button>

            </div>

        </div>

        <div class="row hr-16">

            <div class="col-sm-12">

                <!-- #section:elements.tab -->

                <div class="tabbable">

                    <ul class="nav nav-tabs" id="myTab">

                        <li class="active">

                            <a data-toggle="tab" href="#home">

                                Home

                            </a>

                        </li>

                        <li>

                            <a data-toggle="tab" href="#messages">

                                Messages

                            </a>

                        </li>

                    </ul>

                    <div class="tab-content">

                        <div id="home" class="tab-pane fade in active">

                            <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>

                        </div>

                        <div id="messages" class="tab-pane fade">

                            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>

                        </div>

                    </div>

                </div>

                <!-- /section:elements.tab -->

            </div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

<script type="text/javascript" src="bootstrap-dynamic-tabs.js"></script>

<script type="text/javascript">

    $(function () {

        var tabs = $("ul.nav-tabs");

        $("button").on("click", function () {

            var count = $(".nav-tabs li").length;

            $.get("template.html", function (data) {

                tabs.addTabs({

                    "id": "abc" + count,

                    "title": "新建工单-" + count,

                    "content": "<p><h1>新建工单-" + count + "的内容</h1></p>" + data

                });

            });

        });

    });

</script>

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

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

bootstrap动态添加Tab标签页的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  5. Bootstrap V3使用Tab标签

    Bootstrap V3使用Tab标签 >>>>>>>>>>>>>>>>>>>> ...

  6. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  7. Bootstrap历练实例：标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  9. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

随机推荐

  1. BZOJ.5289.[AHOI/HNOI2018]排列(贪心 heap)

    BZOJ LOJ 洛谷 \(Kelin\)写的挺清楚的... 要求如果\(a_{p_j}=p_k\),\(k\lt j\),可以理解为\(k\)要在\(j\)之前选. 那么对于给定的\(a_j=k\) ...

  2. Java并发编程（五）-- Java内存模型补充

    前面我们已经介绍了:当对象和变量存储到计算机的各个内存区域时,必然会遇到的两个问题及解决方法 共享对象的可见性-- 解决方法:使用java volatile关键字 共享对象的竞争现象 -- 解决方法: ...

  3. Shell脚本笔记（八）循环

    循环 一.whlie和until循环 while循环基本语法: while <条件表达式> do 指令 done #注意代码缩进 util循环基本语法: until <表达式> ...

  4. Shell脚本笔记（七）控制Shell脚本

    控制Shell脚本 一.处理信号 1) SIGHUP本信号在用户终端连接(正常或非正常)结束时发出, 通常是在终端的控制进程结束时, 通知同一session内的各个作业, 这时它们与控制终端不再关联. ...

  5. CentOS 7 安装MongoDB详细步骤

    创建/etc/yum.repos.d/mongodb-org-4.0.repo文件,编辑内容如下: [mongodb-org-4.0] name=MongoDB Repository baseurl= ...

  6. php回话控制 cookie

    <?php class CustomCookie{ static private $_instance = null; private function __construct(array $o ...

  7. 3. Spring 核心之 IOC（控制反转） & DI（依赖注入）

    注:此文摘自 http://blog.csdn.net/it_man/article/details/4402245 IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述 ...

  8. Spring使用原生JDBC

    Spring使用原生JDBC 为加深对Spring解耦的理解,本次实验学习用Spring连接JDBC 一.POM配置文件 pom.xml <project xmlns="http:// ...

  9. 更新 app 操作过期提示

    增加的操作过期提示,再让用户选择是否登录,登录成功后自动返回上一次操作的面页

  10. 如何确定一台linux主机是Linux (i386/i686)还是Linux (x86_64)

    在下软件包的时候,往往会遇到一个选择: 假设自己的主机是Linux,那么Linux (i386/i686)和Linux (x86_64)究竟应该选哪一个呢? 针对当今的硬件而言,如果你主机的CPU是6 ...