好久没有写博客了（主要是懒），工作中用到一个动态添加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. Change position in observation

    HTML <!DOCTYPE HTML> <HTML> <head> <meta charset=" UTF-8"> <tit ...

  2. 如何避免Android程序的ANR？

    In Android, the system guards against applications that are insufficiently responsive for a period o ...

  3. MongoDB的基本查询

    .查询所有的电影名称以及评分 db.data2.find( {},{,} ) .获取所有评分大于等于9.0的电影名称,以及制作的国家 db.data2.find( {"subject.rat ...

  4. [leetcode] 329. Longest Increasing Path in a Matrix My Submissions Question

    在递归调用的函数中使用了max = INT_MIN,结果报超时错误,改为max=0就对了,虽然在这题中最小就为0, 看来在之后最小为0的时候,就不要使用INT_MIN了.

  5. [jzoj]3521.道路覆盖(cover)

    Link https://jzoj.net/senior/#main/show/3521 Description Tar把一段凹凸不平的路分成了高度不同的N段,并用H[i]表示第i段高度.现在Tar一 ...

  6. linux上下载安装mysql，并使用

    一:官网找mysql的安装包 可参考https://blog.csdn.net/a18852867035/article/details/81610611, 我是在https://dev.mysql. ...

  7. web中icon 图标问题

    每个页面都会引入 icon 小图标,下面说下它的用法 一.icon使用 icon的引入方式,与css外部引入方式类似,需要在头部引入, 即: <link rel="shortcut i ...

  8. Centos-Mariadb(新版mysql)无法远程连接

    实际上之前有别人安装过了,对于这种交接的工作最难做,也就是沟通问题.我需要解决的问题是远程连接的问题,百度了一下后,被各路大佬绕的稀里糊涂,耗费了3 个小时 对于即将提交项目的我们来说,简直头疼.表示 ...

  9. 小甲鱼Python第十二讲课后习题---013元组

    0. 请用一句话描述什么是列表?再用一句话描述什么是元组? 列表:一个大仓库,你可以随时往里边添加和删除任何东西.  元组:封闭的列表,一旦定义,就不可改变(不能添加.删除或修改). 1. 什么情况下 ...

  10. python之面向对象高级

    一.__slots__ 1.__slots__的概念:是一个变量,变量值可以是列表,元组,或者可迭代对象,也可以是一个字符串. 2.使用点来访问属性本质就是在访问类或者对象的__dict__属性字典( ...