jQuery tab選項卡制作大氣的圖片案例展示選項卡布局切換效果，寬屏的圖片內容選項卡布局代碼。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body編寫HTML代碼
<div class="case_box">
<h3>他們正在使用</h3>
<div class="category w1200">
<ul>
<li class="active">大樸</li>
<li>多麗城跨境電商</li>
<li>茶小樣</li>
<li>可得福</li>
<li>微品農社</li>
</ul>
</div>
<div class="content w1200">
<div class="cont active">
<img class="bg" src="statics/images/case1.jpg" />
<div class="info">
<div class="title">
<div class="logo"><img src="statics/images/logo1.png" /></div>
<h4>大樸</h4>
</div>
<p>2012年創始的品牌，是一家致力于“高安全性、高質量、 高性價比”的品牌家居電商，以獨特的布局和市場定位，被消費者譽為“中國的無印良品”。作為互聯網品牌電商，大樸采用全渠道營銷策略，不僅入駐天貓、京東、唯品會等主流平臺，同時也通過個性化定制自主的獨立商城，引領家居行業“互聯網+”的方向與實踐。</p>
</div>
</div>
<div class="cont">
<img class="bg" src="statics/images/case2.jpg" />
<div class="info">
<div class="title">
<div class="logo"><img src="statics/images/logo2.png" /></div>
<h4>多麗城跨境電商</h4>
</div>
<p>多麗城跨境電商，是一家專門做跨境電商業務的綜合商城，品類涵蓋服飾箱包、美妝個護、母嬰用品、數碼電子等。通過自建B2C網上商城，為用戶提供海量跨境正品商品。</p>
</div>
</div>
<div class="cont">
<img class="bg" src="statics/images/case3.jpg" />
<div class="info">
<div class="title">
<div class="logo"><img src="statics/images/logo3.jpg" /></div>
<h4>茶小樣</h4>
</div>
<p>茶小様，是由大武夷茶葉交易市場，所打造的茶產業供應鏈綜合服務平臺，通過B2B茶葉直賣的創新模式，以茶樣品體驗促成茶葉批量成交，為茶農茶企開拓銷售渠道。</p>
</div>
</div>
<div class="cont">
<img class="bg" src="statics/images/case4.jpg" />
<div class="info">
<div class="title">
<div class="logo"><img src="statics/images/logo4.jpg" /></div>
<h4>可得福</h4>
</div>
<p>可得福，是一家專門做外貿工廠店的線上商城，企業通過個性化搭建線上的獨立商城，滿足企業的多樣化需求。專注于羊絨羊毛、棉麻時裝，為用戶提供高品質高性價比的服飾。</p>
</div>
</div>
<div class="cont">
<img class="bg" src="statics/images/case5.jpg" />
<div class="info">
<div class="title">
<div class="logo"><img src="statics/images/logo5.jpg" /></div>
<h4>微品農社</h4>
</div>
<p>微品農社是國內頂尖專業為大型企業集團服務的產業互聯網云平臺建設和運營商。與北京、上海、四川、云南等17個省市建立了合作平臺，合作項目涵蓋了移動通訊、電商平臺，農村電商扶貧等多個領域。微品農社還聯合縣域農商和當地政府，打造特色商品，精準扶貧，幫助農民創收，協助企業互聯網轉型，促進農村經濟發展。</p>
</div>
</div>
</div>
</div>
<!--選項卡-->
<script type="text/javascript">
$(function() {
$('.category ul li').click(function() {
var i = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.content .cont').eq(i).addClass('active').siblings().removeClass('active');
})
});
</script>
