Bootstrap插件（三）——标签页导航（tab.js）
2017-09-14 21:15
337 查看
之前讲组件的时候有讲到tab普通式和胶囊式标签页，但是都只是讲解一些静态的布局，并没有加入动态的交互效果，这一篇文章将根据一个代码示例来学习，标签导航与所对应内容的联动。想来看一下具体实现的动态效果：
效果就像上面，当点击tab选项的时候切换 对应的内容，下面是实现的代码:
1
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
标签页导航的使用就简单学习到这儿啦。。。
效果就像上面，当点击tab选项的时候切换 对应的内容，下面是实现的代码:
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
<style type="text/css">
14
15
p{16
padding: 10px;
17
}
18
</style>
19
20
<script>
21
$(function(){22
23
$("#myTabs a:eq(1)").click(24
function(e){25
26
/*
27
//设置打开id="java"的tab-content
28
$('#myTabs a[href="#java"]').tab('show');29
//打开第一个的content
30
$('#myTabs a:first').tab('show');31
//打开最后一个的content
32
$('#myTabs a:last').tab('show');33
//设置打开第3个li的content
34
$('#myTabs li:eq(2) a').tab('show');35
*/
36
37
e.preventDefault();
38
$(this).tab('show');39
/*
40
var s=e.delegateTarget.attributes['href'].nodeValue;
41
42
console.log(s);
43
44
$(s).addClass("active in");45
*/
46
}
47
)
48
})
49
</script>
50
</head>
51
<body style="margin: 60px">
52
53
54
<!--
55
实现联动的方法：
56
1.在li的<a>标签中加入 data-toggle="tab属性 并且href="#php"指向对应内容的id
57
2.全部li对应的内容div包裹在class="tab-content"的div中
58
3 为单个内容div设置.tab-pane 并设置淡入淡出效果 .fade 设置前面href绑定的id
59
-->
60
<div class="tab-nav-main">
61
<ul id="myTabs" class="nav nav-tabs" role="tablist">
62
<li role="presentation" class="active"><a data-toggle="tab" href="#java">Java</a> </li>
63
<li role="presentation"><a role="tab" href="#bootstrap">Bootstrap</a> </li>
64
<li role="presentation"><a role="tab" data-toggle="tab" href="#javascript">Javascript</a> </li>
65
<li role="presentation"><a role="tab" data-toggle="tab" href="#php">PHP</a> </li>
66
</ul>
67
68
<div id="tab-content" class="tab-content">
69
<div role="tabpanel" class="tab-pane fade in active" id="java">
70
<p>Java是一种广泛使用的计算机编程语言，拥有跨平台、面向对象、泛型编程的特性，广泛应用于企业级Web应用开发和移动应用开发。</p>
71
</div>
72
73
<div role="tabpanel" class="tab-pane fade" id="bootstrap">
74
<p>Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是
75
在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。</p>
76
</div>
77
78
<div role="tabpanel" class="tab-pane fade" id="javascript">
79
<p>JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言[4]。它已经由ECMA
80
（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用，也被世界主流浏览器
81
（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言[5]，是一门多范式的语言，
82
它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、
83
存储和图形等，但这些都可以由它的宿主环境提供支持。</p>
84
</div>
85
86
<div role="tabpanel" class="tab-pane fade" id="php">
87
<p>
88
PHP（全称：PHP：Hypertext Preprocessor，即“PHP：超文本预处理器”）是一种开源的通用计算机脚本语言，尤其适用于
89
网络开发并可嵌入HTML中使用。PHP的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点，易于一般程序员学习。
90
PHP的主要目标是允许网络开发人员快速编写动态页面，但PHP也被用于其他很多领域。[1]
91
</p>
92
</div>
93
</div>
94
</div>
95
96
<div class="tab-nav-main" style="margin-top: 30px; background-color: #adadad">
97
<ul id="myTabs1" class="nav nav-pills" role="tablist">
98
<li role="presentation" class="active"><a data-toggle="pill" href="#java1">Java</a> </li>
99
<li role="presentation"><a role="tab" data-toggle="pill" href="#bootstrap1">Bootstrap</a> </li>
100
<li role="presentation"><a role="tab" data-toggle="pill" href="#javascript1">Javascript</a> </li>
101
<li role="presentation"><a role="tab" data-toggle="pill" href="#php1">PHP</a> </li>
102
</ul>
103
104
<div id="tab-content1" class="tab-content">
105
<div role="tabpanel" class="tab-pane fade in active" id="java1">
106
<p>Java是一种广泛使用的计算机编程语言，拥有跨平台、面向对象、泛型编程的特性，广泛应用于企业级Web应用开发和移动应用开发。</p>
107
</div>
108
109
<div role="tabpanel" class="tab-pane fade" id="bootstrap1">
110
<p>Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是
111
在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。</p>
112
</div>
113
114
<div role="tabpanel" class="tab-pane fade" id="javascript1">
115
<p>JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言[4]。它已经由ECMA
116
（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用，也被世界主流浏览器
117
（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言[5]，是一门多范式的语言，
118
它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、
119
存储和图形等，但这些都可以由它的宿主环境提供支持。</p>
120
</div>
121
122
<div role="tabpanel" class="tab-pane fade" id="php1">
123
<p>
124
PHP（全称：PHP：Hypertext Preprocessor，即“PHP：超文本预处理器”）是一种开源的通用计算机脚本语言，尤其适用于
125
网络开发并可嵌入HTML中使用。PHP的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点，易于一般程序员学习。
126
PHP的主要目标是允许网络开发人员快速编写动态页面，但PHP也被用于其他很多领域。[1]
127
</p>
128
</div>
129
</div>
130
</div>
131
</body>
132
</html>
133
标签页导航的使用就简单学习到这儿啦。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
- bootstrap插件学习-bootstrap.tab.js
- bootstrap插件学习-bootstrap.tab.js(读码)
- Bootstrap 标签页Tab插件使用方法
- Bootstrap的js插件之标签页(tab)
- Firefox标签页工具~整合defpt的TabPlus.uc.js，并增加了几项常用功能！去掉地址栏输入新开功能~这是BUG，经常导致地址栏不能导航
- bootstrap插件学习-bootstrap.tab.js
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- bootstrap 通过js代码创建和关闭插件
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
- Bootstrap transition.js 插件详解
- Bootstrap的js插件之按钮(button)
- bootstrap-导航（标签形tab导航）
- 最简单地实现标签页导航-----TabLayout+ViewPager
- bootstrap——js插件（二、其他）
- Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页
- 选项卡插件jquery.tab.js和不用js写选项卡
- Bootstrap每天必学之标签页（Tab）插件
- Bootstrap 附加导航（Affix）插件
- bootstrapValidator.js，最好用的bootstrap表单验证插件