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>微品農(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ì)量、 高性價比”的品牌家居電商，以獨特的布局和市場定位，被消費者譽為“中國的無印良品”。作為互聯(lián)網(wǎng)品牌電商，大樸采用全渠道營銷策略，不僅入駐天貓、京東、唯品會等主流平臺，同時也通過個性化定制自主的獨立商城，引領(lǐng)家居行業(yè)“互聯(lián)網(wǎng)+”的方向與實踐。</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>多麗城跨境電商，是一家專門做跨境電商業(yè)務的綜合商城，品類涵蓋服飾箱包、美妝個護、母嬰用品、數(shù)碼電子等。通過自建B2C網(wǎng)上商城，為用戶提供海量跨境正品商品。</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ǎn)業(yè)供應鏈綜合服務平臺，通過B2B茶葉直賣的創(chuàng)新模式，以茶樣品體驗促成茶葉批量成交，為茶農(nóng)茶企開拓銷售渠道。</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>可得福，是一家專門做外貿(mào)工廠店的線上商城，企業(yè)通過個性化搭建線上的獨立商城，滿足企業(yè)的多樣化需求。專注于羊絨羊毛、棉麻時裝，為用戶提供高品質(zhì)高性價比的服飾。</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)社是國內(nèi)頂尖專業(yè)為大型企業(yè)集團服務的產(chǎn)業(yè)互聯(lián)網(wǎng)云平臺建設和運營商。與北京、上海、四川、云南等17個省市建立了合作平臺，合作項目涵蓋了移動通訊、電商平臺，農(nóng)村電商扶貧等多個領(lǐng)域。微品農(nóng)社還聯(lián)合縣域農(nóng)商和當?shù)卣?，打造特色商品，精準扶貧，幫助農(nóng)民創(chuàng)收，協(xié)助企業(yè)互聯(lián)網(wǎng)轉(zhuǎn)型，促進農(nóng)村經(jīng)濟發(fā)展。</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>