bootstrap 选项卡的使用

1.页面中的tab

在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图

bootstrap 选项卡的使用

就直接使用了bootstrapd的选项卡

学习源头:

http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

<!--图表信息  -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#zfbt" data-toggle="tab">
支付成功订单数量
</a>
</li>
<li><a href="#cjbt" data-toggle="tab">总计成交金额</a>
</li><li><a href="#pvbt" data-toggle="tab">PV</a></li>
</li><li><a href="#uvbt" data-toggle="tab">UV</a></li>
</ul>
<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
<div class="tab-pane fade in active" id="zfbt">
<div id="zf" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="cjbt">
<div id="cj" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="pvbt">
<div id="pv" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="uvbt">
<div id="uv" style="width: 1688px;height:400px;"></div>
</div>
</div>

2.弹窗中的tab

学的时候翻看到了layer的 tab层

bootstrap 选项卡的使用

//tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
上一篇:linux系统目录介绍


下一篇:【超精简JS模版库/前端模板库】原理简析 和 XSS防范