bootStrap实现tab页切换

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 // 上一个选择的标签
})