好久没有写博客了（主要是懒），工作中用到一个动态添加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. 洛谷 P1078 文化之旅(CODEVS 1316)

    题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一 种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不 同的国家可能有相同的文化.不同 ...

  2. Systick时钟定时

    主函数 /* Note:Your choice is C IDE */ #include "stdio.h" #include "led.h" void mai ...

  3. mac中安装 RabbitMQ

    1.brew install rabbitmq 2.安装后,进入/usr/local/Cellar/rabbitmq/3.7.7 ,输入:sbin/rabbitmq-server 出现下面日志,说明启 ...

  4. [USACO18DEC]Cowpatibility

    Description: Farmer John 的 \(N\) 头奶牛(\(2\le N\le 5\times 10^4\))各自列举了她们最喜欢的五种冰激凌口味的清单.为使这个清单更加精炼,每种可 ...

  5. FZU2279 : Cantonese

    首先把相同的事件点合并,那么每个点有时间$t_i$,位置$x_i$,价值$v_i$. 考虑DP,设$f_i$表示按时间从小到大考虑每个事件,目前位于事件$i$的时间与位置时,最多能让多少个事件发生.在 ...

  6. vim技巧4 删除/保留文本中匹配行

    vim技巧:如何删除/保留文本中特定的行呢? <ol><a href="/ss/ss/www"> show invisibles</a> < ...

  7. 数据库出现'\xF0\x9F\x98\xB8'

    https://www.cnblogs.com/jinTaylor/p/4607505.html https://blog.csdn.net/qq_40074764/article/details/7 ...

  8. 如何修改PHP的memory_limit限制

    在运行PHP程序,通常会遇到“Fatal Error: Allowed memory size of xx bytes exhausted”(允许内存大小为 xx 字节耗尽)的错误, 这个意味着PHP ...

  9. TypeScript语法学习--变量的声明

    JavaScript里相对较新的变量声明方式是let和const.let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止 ...

  10. boost::lockfree::queue多线程读写实例

    最近的任务是写一个多线程的东西,就得接触多线程队列了,我反正是没学过分布式的,代码全凭感觉写出来的,不过运气好,代码能够work= = 话不多说,直接给代码吧,一个多消费者,多生产者的模式.假设我的任 ...