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="">
<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的樣式，最后運行的截圖如下：
轉自：https://www.cnblogs.com/zhuiyi/p/6612755.html