bootStrap实现tab页切换
来源:互联网 发布:济南青少年编程 编辑:程序博客网 时间:2024/06/07 11:41
bootStrap可以简单方便的实现tab页面的切换
用法
通过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>
通过JavaScript
- 通过JavaScript启用可切换标签 (每个标签都需要单独激活):
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show');})
- 以多种方式激活标签:
$('#myTab a[href="#profile"]').tab('show'); // 通过名字选择$('#myTab a:first').tab('show'); // 选择第一个标签$('#myTab a:last').tab('show'); // 择最后一个标签$('#myTab li:eq(2) a').tab('show'); // 选择第三个标签
方法
$().tab
激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。
举个栗子
<ul class="nav nav-tabs" id="myTab"> <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>
事件
事件描述 show 该事件在标签开始展示时(尚未渲染完之前)触发。 event.target 指向要激活的标签,event.relatedTarget 提向之前已激活的标签(如果有的话)。 shown 该事件在标签已经呈现后(已渲染完成)触发。 event.target 指向要激活的标签, event.relatedTarget提向之前已激活的标签(如果有的话)。$('a[data-toggle="tab"]').on('shown', function (e) { e.target // 当前活动的标签 e.relatedTarget // 上一个选择的标签})
0 0
- bootStrap实现tab页切换
- bootStrap实现tab页切换
- Bootstrap来实现tab页的切换
- $().tab() bootStrap中Tab页签切换
- bootStrap中Tab页签切换
- bootStrap中Tab页签切换
- #bootStrap中Tab页签切换
- 使用Bootstrap tab页切换的使用
- bootStrap中Tab页签切换
- bootStrap可以简单方便的实现tab页面的切换
- tab标签切换页实现
- tab页切换效果 实现
- jquery tab页切换简单实现
- MFC实现多TAB页的切换
- 纯 CSS 实现 tab 页切换
- Fragment+RadioButton实现Tab页切换
- Javascript实现Tab切换
- 实现tab切换效果
- 在集群上搭建speedy
- iOS开发之new 和 alloc init的区别
- 小米手机3,小米手机4 官方移动稳定版最新 ROM V6.7.1.0.KXDCNCH
- UIscrollView 属性总结
- Mapped Statements collection does not contain value for......
- bootStrap实现tab页切换
- 剑指offer习题2
- C++中的static关键字 (转载)
- Android RecyclerView 使用完全解析 体验艺术般的控件
- Android Service全解(三)之 Foreground Service(怎么让Android程序一直后台运行,像QQ一样不被杀死?)
- ARM交叉编译工具链制作
- CYC-数据库的运用
- 【Android应用开发技术:网络通信】Socket套接字
- HDU 5491 The next(2015 ACM/ICPC Asia Regional Hefei Online )(贪心)