2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
* 增加标签页
*/
function addTab(options) {
//option:
//tabMainName:tab标签页所在的容器
//tabName:当前tab的名称
//tabTitle:当前tab的标题
//tabUrl:当前tab所指向的URL地址
var exists = checkTabIsExists(options.tabMainName, options.tabName)
if(exists){
$("#tab_a_"+options.tabName).click()
} else {
$("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')
//固定TAB中IFRAME高度
mainHeight = $(document.body).height() - 5
var content = ''
if(options.content){
content = option.content
} else {
content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'
}
$("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')
$("#tab_a_"+options.tabName).click()
}
}
/**
* 关闭标签页
* @param button
*/
function closeTab (button) {
//通过该button找到对应li标签的id
var li_id = $(button).parent().parent().attr('id')
var id = li_id.replace("tab_li_","")
//如果关闭的是当前激活的TAB，激活他的前一个TAB
if ($("li.active").attr('id') == li_id) {
$("li.active").prev().find("a").click()
}
//关闭TAB
$("#" + li_id).remove()
$("#tab_content_" + id).remove()
}
/**
* 判断是否存在指定的标签页
* @param tabMainName
* @param tabName
* @returns {Boolean}
*/
function checkTabIsExists(tabMainName, tabName){
var tab = $("#"+tabMainName+" >#tab_li_"+tabName)
//console.log(tab.length)
return tab.length >0
}
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页（Tab）插件</title>
<link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
W3Cschool Home
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机 *** 作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X *** 作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
</body>
</html>
很少使用Bootstrap提供的标签。 直接写在js里。 你可以这么做： 1、做好你写死的那个模态框 2、在按钮上注册click事件 3、click事件触发的同时调用load方法往.modal-content里塞你的数据 4、最后在load方法的回调里把模态框显示出来。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）