jQuery新零售产品列表tab选项卡布局，悬停标签滑动切换选项卡代码。
使用方法
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">新零售系列产品</h2> <div class="desc"> <strong class="color">新零售：</strong> 即企业以互联网为依托，通过运用 <span class="color">大数据</span>、<span class="color">人工智能</span>等先进技术手段，对商品的生产、流通与销售过程进行升级改造，进而重塑业态结构与生态圈，并对<span class="color">线上服务</span>、<span class="color">线下体验</span>以及<span class="color">现代物流</span>进行深度融合的零售新模式 。<span class="color">线上线下和物流结合在一起，才会产生新零售。</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>智能电商生态系统，支持自营、招商、批发、区域等多模式运营，还可轻松对接物流、ERP、收银等周边系统，帮您打造智能新零售！</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>其他行业</p> </a> </li> </ul> </div> </div> <div class="product-item hide"> <div class="product-desc"> <h3>云ERP+收银狗</h3> <p>云ERP+收银狗是SAAS型进销存与收银系统，以多商家入驻、加盟连锁为经营模式，涵盖平台方、商家、收银员等多种角色，进销存核心模块环环相扣。可无缝对接商城系统，线上线下结合，实现电商实体一体化管理。<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>果蔬行业</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>校园行业</p> </a> </li> </ul> </div> </div> <div class="product-item hide"> <div class="product-desc"> <h3>云物流</h3> <p>云物流系统以众包物流为主，自建物流为辅，实现类似滴滴打车的抢单配送。使用云物流系统既可以管理自己的配送团队，也可以整合发单商家和兼职配送人员。<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>更多行业</p> </a> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> $(function() { // 产品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>
