jQuery tab選項(xiàng)卡制作大氣的圖片案例展示選項(xiàng)卡布局切換效果，寬屏的圖片內(nèi)容選項(xiàng)卡布局代碼。
使用方法：
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編寫(xiě)HTML代碼
<div class="case_box">
<h3>他們正在使用</h3>
<div class="category w1200">
<ul>
<li class="active">大樸</li>
<li>多麗城跨境電商</li>
<li>茶小樣</li>
<li>可得福</li>
<li>微品農(nóng)社</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年創(chuàng)始的品牌，是一家致力于“高安全性、高質(zhì)量、 高性?xún)r(jià)比”的品牌家居電商，以獨(dú)特的布局和市場(chǎng)定位，被消費(fèi)者譽(yù)為“中國(guó)的無(wú)印良品”。作為互聯(lián)網(wǎng)品牌電商，大樸采用全渠道營(yíng)銷(xiāo)策略，不僅入駐天貓、京東、唯品會(huì)等主流平臺(tái)，同時(shí)也通過(guò)個(gè)性化定制自主的獨(dú)立商城，引領(lǐng)家居行業(yè)“互聯(lián)網(wǎng)+”的方向與實(shí)踐。</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>多麗城跨境電商，是一家專(zhuān)門(mén)做跨境電商業(yè)務(wù)的綜合商城，品類(lèi)涵蓋服飾箱包、美妝個(gè)護(hù)、母嬰用品、數(shù)碼電子等。通過(guò)自建B2C網(wǎng)上商城，為用戶(hù)提供海量跨境正品商品。</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>茶小様，是由大武夷茶葉交易市場(chǎng)，所打造的茶產(chǎn)業(yè)供應(yīng)鏈綜合服務(wù)平臺(tái)，通過(guò)B2B茶葉直賣(mài)的創(chuàng)新模式，以茶樣品體驗(yàn)促成茶葉批量成交，為茶農(nóng)茶企開(kāi)拓銷(xiāo)售渠道。</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>可得福，是一家專(zhuān)門(mén)做外貿(mào)工廠(chǎng)店的線(xiàn)上商城，企業(yè)通過(guò)個(gè)性化搭建線(xiàn)上的獨(dú)立商城，滿(mǎn)足企業(yè)的多樣化需求。專(zhuān)注于羊絨羊毛、棉麻時(shí)裝，為用戶(hù)提供高品質(zhì)高性?xún)r(jià)比的服飾。</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>微品農(nóng)社</h4>
</div>
<p>微品農(nóng)社是國(guó)內(nèi)頂尖專(zhuān)業(yè)為大型企業(yè)集團(tuán)服務(wù)的產(chǎn)業(yè)互聯(lián)網(wǎng)云平臺(tái)建設(shè)和運(yùn)營(yíng)商。與北京、上海、四川、云南等17個(gè)省市建立了合作平臺(tái)，合作項(xiàng)目涵蓋了移動(dòng)通訊、電商平臺(tái)，農(nóng)村電商扶貧等多個(gè)領(lǐng)域。微品農(nóng)社還聯(lián)合縣域農(nóng)商和當(dāng)?shù)卣蛟焯厣唐罚珳?zhǔn)扶貧，幫助農(nóng)民創(chuàng)收，協(xié)助企業(yè)互聯(lián)網(wǎng)轉(zhuǎn)型，促進(jìn)農(nóng)村經(jīng)濟(jì)發(fā)展。</p>
</div>
</div>
</div>
</div>
<!--選項(xiàng)卡-->
<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>
