使用方法
可以分为Tab区和Content区。
- Tab区为<ul>列表,要求带有"nav nav-tabs"或"nav nav-pills"两种类名。<li>下的<a>标签要求带有data-toggle="tab"属性,可以通过data-target或href指定对应的Content
- Content区要求带有"tab-content"类名,每个面板要求有"tab-pane"类名以及Id(即Tab里指定的target)
- 如果"tab-pane"都上加上fade的类名(第一个需要额外再加上"in",使他显示出来)。配合transition.js就能有过渡效果
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="home">
<p>Home Content</p>
</div>
<div class="tab-pane" id="profile">
<p>Profile Content</p>
</div>
</div>
核心思路
- 在初始化时为data-toggle="tab"和data-toggle="pill"绑定点击处理程序
- 点击Tab