jQuery新零售產(chǎn)品系列滑動選項卡布局代碼

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/iconfont/iconfont.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="container">
	<h2 class="title">新零售系列產(chǎn)品</h2>
	<div class="desc">
		<strong class="color">新零售：</strong> 即企業(yè)以互聯(lián)網(wǎng)為依托，通過運用
		<span class="color">大數(shù)據(jù)</span>、<span class="color">人工智能</span>等先進技術手段，對商品的生產(chǎn)、流通與銷售過程進行升級改造，進而重塑業(yè)態(tài)結(jié)構(gòu)與生態(tài)圈，并對<span class="color">線上服務</span>、<span class="color">線下體驗</span>以及<span class="color">現(xiàn)代物流</span>進行深度融合的零售新模式 。<span class="color">線上線下和物流結(jié)合在一起，才會產(chǎn)生新零售。</span>
	</div>
	<div class="content">
		<ul class="product-tab">
			<li class="active">
				<img src="statics/images/product-icon1.png" /> 翼商城
			</li>
			<li>
				<img src="statics/images/product-icon2.png" /> 云ERP+收銀狗
			</li>
			<li>
				<img src="statics/images/product-icon3.png" /> 云物流
			</li>
			<li class="line"></li>
		</ul>
	</div>
	<div class="product-list">
		<div class="product-item">
			<div class="product-desc">
				<h3>翼商城</h3>
				<p>智能電商生態(tài)系統(tǒng)，支持自營、招商、批發(fā)、區(qū)域等多模式運營，還可輕松對接物流、ERP、收銀等周邊系統(tǒng)，幫您打造智能新零售！</p>
				<a href="#" class="btn">了解詳情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>全國電商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>連鎖店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>供應商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>廠商/經(jīng)銷商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>農(nóng)村電商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>生鮮電商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>母嬰電商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>連鎖超市</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>百貨商場</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>其他行業(yè)</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="product-item hide">
			<div class="product-desc">
				<h3>云ERP+收銀狗</h3>
				<p>云ERP+收銀狗是SAAS型進銷存與收銀系統(tǒng)，以多商家入駐、加盟連鎖為經(jīng)營模式，涵蓋平臺方、商家、收銀員等多種角色，進銷存核心模塊環(huán)環(huán)相扣?？蔁o縫對接商城系統(tǒng)，線上線下結(jié)合，實現(xiàn)電商實體一體化管理。<span>*加入商家QQ群大本營，一起交流運營心得吧，QQ群號：279730318</span></p>
				<a href="#" class="btn">了解詳情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>果蔬行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>餐飲行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>服裝行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>商超行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>母嬰行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>社區(qū)行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>五金建材</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>快餐外賣</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>咖啡行業(yè)</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>校園行業(yè)</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="product-item hide">
			<div class="product-desc">
				<h3>云物流</h3>
				<p>云物流系統(tǒng)以眾包物流為主，自建物流為輔，實現(xiàn)類似滴滴打車的搶單配送。使用云物流系統(tǒng)既可以管理自己的配送團隊，也可以整合發(fā)單商家和兼職配送人員。<span>*加入商家QQ群大本營，一起交流運營心得吧，QQ群號：292844176</span></p>
				<a href="#" class="btn">了解詳情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>水果店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>便利店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>蛋糕店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>茶飲店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>鮮花店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>服裝店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>飯店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>酒店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>旅行社</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>更多行業(yè)</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		// 產(chǎn)品tab切換
		$('.product-tab li').hover(function() {
			$('.product-tab li.line').stop().animate({
				'left': $(this).position().left
			});
			$('.product-list .product-item').stop().eq($(this).index()).show().siblings().hide();
		});
	})
</script>