基于jquery.SuperSlide插件制作简洁的选项卡鼠标滑过TAB切换效果，SuperSlide插件扩展性强，方面其它功能使用，下载即可使用。
使用方法：
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="change-content change-box">
<div class="change-main">
<div class="change-cut flex-row">
<ul class="clearfix">
<li class="transition tab on">我们的承诺</li>
<li class="transition tab">我们的实力</li>
<li class="transition tab" style="border-right:0">我们的角色</li>
</ul>
</div>
<div class="contents clearfix">
<div class="content flex-row" style="display: block;">
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-009.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">7*24小时售后支持</p>
<p class="item-p">全国7x24小时客服热线</p>
</div>
</div>
</a>
<a href="#">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-010.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">100倍故障时长赔偿</p>
<p class="item-p">100倍赔付终端服务时间</p>
</div>
</div>
</a>
<a href="#">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-011.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">15天无理由退款</p>
<p class="item-p">部分产品可享受15天无理由退款</p>
</div>
</div>
</a>
<a href="#">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-012.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">多对一团队服务</p>
<p class="item-p">全国80家分公司便捷服务</p>
</div>
</div>
</a>
</div>
<div class="content flex-row" style="display: none;">
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-005.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">19年历史</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-006.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">80家分公司</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-007.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">1000名设计师、工程师</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-008.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">120万客户</p>
</div>
</div>
</a>
</div>
<div class="content flex-row" style="display: none;">
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-001.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">同行</p>
<p class="item-p">持续陪伴企业成长，共创，共赢</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-002.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">赋能</p>
<p class="item-p">帮助企业建立智能经营的能力</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-003.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">连接</p>
<p class="item-p">为企业连接一切潜在商业价值</p>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="item flex-rows">
<div class="img-block"> <img src="images/icon-svg-004.svg" alt="img"> </div>
<div class="item-block">
<p class="item-title">开放</p>
<p class="item-p">面向所有企业和伙伴开放共享</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".change-main").slide({ titCell:".flex-row li", mainCell:".contents",delayTime:0 });
</script>
