Bootstrap V3使用Tab标签
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年9月7日 10:36:25 星期一
http://fanshuyao.iteye.com/
使用Tab需要引用bootstrap.min.js
一、页面内容：
<div> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> <!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div> </div>
二、添加效果
Fade effect
To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
三、js控制Tab显示
$('#someTab').tab('show')
更多详情见：
http://v3.bootcss.com/javascript/#tabs>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年9月7日 10:36:25 星期一
http://fanshuyao.iteye.com/