jQuery新零售產(chǎn)品列表tab選項卡布局，懸停標(biāo)簽滑動切換選項卡代碼。
使用方法：
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>等先進(jìn)技術(shù)手段，對商品的生產(chǎn)、流通與銷售過程進(jìn)行升級改造，進(jìn)而重塑業(yè)態(tài)結(jié)構(gòu)與生態(tài)圈，并對<span class="color">線上服務(wù)</span>、<span class="color">線下體驗</span>以及<span class="color">現(xiàn)代物流</span>進(jìn)行深度融合的零售新模式 。<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>供應(yīng)商</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型進(jìn)銷存與收銀系統(tǒng)，以多商家入駐、加盟連鎖為經(jīng)營模式，涵蓋平臺方、商家、收銀員等多種角色，進(jìn)銷存核心模塊環(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)既可以管理自己的配送團(tuán)隊，也可以整合發(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>
jQuery新零售產(chǎn)品系列滑動選項卡布局代碼 
