Bootstrap来实现tab页的切换
2016-12-05 23:29
381 查看
使用这种方式不需要使用js
用法
通过data属性
可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式.
![](https://img-blog.csdn.net/20150928165128498)
2
3
4
5
6
1
2
3
4
5
6
通过JavaScript
通过JavaScript启用可切换标签 (每个标签都需要单独激活):
2
3
4
1
2
3
4
以多种方式激活标签:
2
3
4
1
2
3
4
方法
$().tab
激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。
举个栗子
![](https://img-blog.csdn.net/20150928164134722)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
事件
2
3
4
1
2
3
4
用法
通过data属性
可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式.
<ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">首页</a></li> <li><a href="#profile" data-toggle="tab">介绍</a></li> <li><a href="#messages" data-toggle="tab">消息</a></li> <li><a href="#settings" data-toggle="tab">设置</a></li> </ul>1
2
3
4
5
6
1
2
3
4
5
6
通过JavaScript
通过JavaScript启用可切换标签 (每个标签都需要单独激活):
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); })1
2
3
4
1
2
3
4
以多种方式激活标签:
$('#myTab a[href="#profile"]').tab('show'); // 通过名字选择 $('#myTab a:first').tab('show'); // 选择第一个标签 $('#myTab a:last').tab('show'); // 择最后一个标签 $('#myTab li:eq(2) a').tab('show'); // 选择第三个标签1
2
3
4
1
2
3
4
方法
$().tab
激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。
举个栗子
<ul class="nav nav-tabs" id="myTab">1
<li class="active"><a href="#home">首页</a></li>
<li><a href="#profile">介绍</a></li>
<li><a href="#messages">消息</a></li>
<li><a href="#settings">设置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">.首页内容..</div>
<div class="tab-pane" id="profile">介绍内容...</div>
<div class="tab-pane" id="messages">.消息内容..</div>
<div class="tab-pane" id="settings">.设置内容..</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show');
})
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); })
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
事件
事件 | 描述 |
show | 该事件在标签开始展示时(尚未渲染完之前)触发。 event.target 指向要激活的标签,event.relatedTarget 提向之前已激活的标签(如果有的话)。 |
shown | 该事件在标签已经呈现后(已渲染完成)触发。 event.target 指向要激活的标签, event.relatedTarget提向之前已激活的标签(如果有的话)。 |
$('a[data-toggle="tab"]').on('shown', function (e) { e.target // 当前活动的标签 e.relatedTarget // 上一个选择的标签 })1
2
3
4
1
2
3
4
相关文章推荐
- bootStrap实现tab页切换
- bootStrap实现tab页切换
- MFC Ribbon Category实现tab页切换视图功能
- ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品
- bootstrap实现pause/play键切换
- ReactJS尝鲜:实现tab页切换和菜单栏切换和手风琴切换效果,进度条效果
- 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
- Xtra窗口中实现多个Tab页的切换
- bootStrap中Tab页签切换
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果
- 01_bootStrap中Tab页签切换
- 不用jquery实现tab页切换,刷新,后退,前进状态自动维护 很好用
- js实现tab页切换选项卡代码特效
- ActionBar + ViewPager实现左右滑动切换Tab页效果
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果
- java 实现tab页签切换 鼠标悬浮效果
- MFC Ribbon Category实现tab页切换视图功能
- 使用js实现tab页签切换效果
- bootStrap中Tab页签切换
- BootStrap中Tab页签切换实例代码