基础

<div class="tabs"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">支付宝</a></li> <li><a href="javascript:;">微信</a></li> <li><a href="javascript:;">其他</a></li> </ul> <div class="tabs-content"> <div class="tabs-pane active"> <img src="static/picture/alipay.jpg" width="300"> </div> <div class="tabs-pane"> <img src="static/picture/weixin.jpg" width="300"> </div> <div class="tabs-pane"> 333333 </div> </div> </div>

当作菜单

<div class="tabs"> <div class="tabs-header-nav"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">支付宝</a></li> <li><a href="javascript:;">微信</a></li> <li><a href="javascript:;">其他</a></li> </ul> <div class="tabs-header-more"><a href="">更多</a></div> </div> <div class="tabs-body p"> <div class="tabs-content"> <div class="tabs-pane active"> 支付宝 </div> <div class="tabs-pane"> 微信 </div> <div class="tabs-pane"> 其他 </div> </div> </div> </div>
<div class="tabs"> <div class="tabs-header-subject"> <div class="tabs-header-title">电器商城</div> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">支付宝</a></li> <li><a href="javascript:;">微信</a></li> <li><a href="javascript:;">其他</a></li> </ul> </div> <div class="tabs-body p"> <div class="tabs-content"> <div class="tabs-pane active"> 支付宝 </div> <div class="tabs-pane"> 微信 </div> <div class="tabs-pane"> 其他 </div> </div> </div> </div>

左右结构

<div class="tabs tabs-vertical" data-type="hover"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">最新</a></li> <li><a href="javascript:;">最热</a></li> <li><a href="javascript:;">深度</a></li> </ul> <div class="tabs-content"> <div class="tabs-pane active"> 111111 </div> <div class="tabs-pane"> 222222 </div> <div class="tabs-pane"> 333333 </div> </div> </div>

白底

<div style="background:#F4F7FA;padding:20px;"> <div class="tabs tabs-white"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">最新1</a></li> <li><a href="javascript:;">最热2</a></li> <li><a href="javascript:;">深度3</a></li> </ul> <div class="tabs-content"> <div class="tabs-pane active"> 111111 </div> <div class="tabs-pane"> 222222 </div> <div class="tabs-pane"> 333333 </div> </div> </div> </div>

白底

<div style="background:#F4F7FA;padding:20px;"> <div class="tabs tabs-white tabs-vertical"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">最新1</a></li> <li><a href="javascript:;">最热2</a></li> <li><a href="javascript:;">深度3</a></li> </ul> <div class="tabs-content" style="min-height:160px;"> <div class="tabs-pane active"> 111111 </div> <div class="tabs-pane"> 222222 </div> <div class="tabs-pane"> 333333 </div> </div> </div> </div>