jquery企业云服务产品介绍点击图标菜单tab切换效果代码。基于SuperSlide制作的图标选项卡tab代码。简单易用，下载即可使用，
使用方法：
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="product-content">
<div class="product-title">
<h3>了解我们的云产品</h3>
</div>
<div class="product-box">
<div class="product-header hd">
<ul>
<li class="on">
<a href="#">
<span class="product-head-tag">
<img src="images/icon1-1.svg" alt="">
<img src="images/icon1-2.svg" alt="" class="active-img">
</span>
<span class="product-head-tit">互联网中间件</span>
</a>
</li>
<li>
<a href="#">
<span class="product-head-tag">
<img src="images/icon2-1.svg" alt="">
<img src="images/icon2-2.svg" alt="" class="active-img">
</span>
<span class="product-head-tit">域名与网站</span>
</a>
</li>
<li>
<a href="#">
<span class="product-head-tag">
<img src="images/icon3-1.svg" alt="">
<img src="images/icon3-2.svg" alt="" class="active-img">
</span>
<span class="product-head-tit">安全</span>
</a>
</li>
<li>
<a href="#">
<span class="product-head-tag">
<img src="images/icon4-1.svg" alt="">
<img src="images/icon4-2.svg" alt="" class="active-img">
</span>
<span class="product-head-tit">视频服务</span>
</a>
</li>
<li>
<a href="#">
<span class="product-head-tag">
<img src="images/icon5-1.svg" alt="">
<img src="images/icon5-2.svg" alt="" class="active-img">
</span>
<span class="product-head-tit">大数据</span>
</a>
</li>
</ul>
</div>
</div>
<div class="product-switch bd">
<ul class="product-list">
<li class="product-list-item">
<h3>
<a href="#">
负载均衡 <i>折扣</i>
</a>
</h3>
<div class="product-list-text">
<span>对多台服务器进行流量分发</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">消息队列
</a>
</h3>
<div class="product-list-text">
<span>分布式消息队列服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">API 网关
</a>
</h3>
<div class="product-list-text">
<span>API 全生命周期托管服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">腾讯分布式服务框架
</a>
</h3>
<div class="product-list-text">
<span>可靠、全面、易用的分布式服务PaaS平台</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">云数据迁移
</a>
</h3>
<div class="product-list-text">
<span>TB/PB 级数据迁移上云</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">日志服务
</a>
</h3>
<div class="product-list-text">
<span>一站式日志数据解决方案</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">私有云存储
</a>
</h3>
<div class="product-list-text">
<span>安全、稳定、海量、多协议兼容的私有云存储服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">存储网关
</a>
</h3>
<div class="product-list-text">
<span>混合云存储服务</span>
</div>
</li>
</ul>
<ul class="product-list">
<li class="product-list-item">
<h3>
<a href="#">
域名注册 <i>优惠</i>
</a>
</h3>
<div class="product-list-text">
<span>专业域名服务，安全、省心、可信赖</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">云解析
</a>
</h3>
<div class="product-list-text">
<span>向全网域名提供稳定、安全、快速的智能解析服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">建站主机
</a>
</h3>
<div class="product-list-text">
<span>全方位，超便捷的网站服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">网站备案
</a>
</h3>
<div class="product-list-text">
<span>备案备多久，云服务免费用多久</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">SSL证书
</a>
</h3>
<div class="product-list-text">
<span>数字证书一站式管理，快速接入 HTTPS 安全</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">移动解析HttpDNS
</a>
</h3>
<div class="product-list-text">
<span>防劫持、智能调度、稳定可靠的移动APP域名解析服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">企业邮箱
</a>
</h3>
<div class="product-list-text">
<span>提供最全面、最专业、专属定制的企业邮件服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">检测工具
</a>
</h3>
<div class="product-list-text">
<span>自动诊断域名、SSL证书状态，保障网站安全</span>
</div>
</li>
</ul>
<ul class="product-list">
<li class="product-list-item">
<h3>
<a href="#">
网络安全 <i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>抵御大流量DDoS攻击，守护企业网络安全</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">网站管家 WAF
</a>
</h3>
<div class="product-list-text">
<span>专业为网站服务的一站式智能安全防护平台</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">云镜（主机安全）
</a>
</h3>
<div class="product-list-text">
<span>基于机器学习为用户提供检测和预警服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">
Web 漏洞扫描<i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>便捷、准确的漏洞扫描服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">专家服务
</a>
</h3>
<div class="product-list-text">
<span>腾讯安全专家提供专业技术支持服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">移动安全
</a>
</h3>
<div class="product-list-text">
<span>防止破解盗版，对抗游戏外挂等一站式移动安全解决方案</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">业务防控（天御）
</a>
</h3>
<div class="product-list-text">
<span>登录注册防撞库，活动防刷、防薅羊毛</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">内容安全
</a>
</h3>
<div class="product-list-text">
<span>精准识别图文、视频中色情、暴恐、广告等恶意内容</span>
</div>
</li>
</ul>
<ul class="product-list">
<li class="product-list-item">
<h3>
<a href="#">
点播 <i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>一站式媒体转码分发平台</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">直播
</a>
</h3>
<div class="product-list-text">
<span>专业稳定快速的直播接入和分发服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">云转码
</a>
</h3>
<div class="product-list-text">
<span>智能、强悍、全面的云端转码和音视频处理服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">互动直播
</a>
</h3>
<div class="product-list-text">
<span>多平台的音视频开播、观看及连麦等互动直播能力</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">移动直播
</a>
</h3>
<div class="product-list-text">
<span>基于 RTMP SDK 快速集成的移动直播解决方案</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">短视频
</a>
</h3>
<div class="product-list-text">
<span>结合强大的云端能力，提供客户端丰富的拍摄、编辑等短视频功能</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">美视优享
</a>
</h3>
<div class="product-list-text">
<span>专业的视频鉴黄、美颜特效服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">X-P2P
</a>
</h3>
<div class="product-list-text">
<span>业内最优的低延迟 P2P 解决方案</span>
</div>
</li>
</ul>
<ul class="product-list">
<li class="product-list-item">
<h3>
<a href="#">
大数据处理套件 <i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>可靠、安全、易用，可以按需部署的大数据处理服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">弹性 MapReduce
</a>
</h3>
<div class="product-list-text">
<span>可靠、安全、灵活的云端托管Hadoop服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">
流计算服务<i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>云端的流式数据汇聚、计算服务，满足您实时处理数据的需求</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">
Elasticsearch Service<i>新品</i>
</a>
</h3>
<div class="product-list-text">
<span>云端托管的 Elasticsearch 服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">数据工坊
</a>
</h3>
<div class="product-list-text">
<span>轻量级云上大数据处理分析服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">云推荐引擎
</a>
</h3>
<div class="product-list-text">
<span>快速提供安全、便捷、精准、可靠的推荐系统服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">DI-P实时多维分析引擎
</a>
</h3>
<div class="product-list-text">
<span>无需预建数据立方的大数据毫秒级多维分析服务</span>
</div>
</li>
<li class="product-list-item">
<h3>
<a href="#">大数据可视交互系统
</a>
</h3>
<div class="product-list-text">
<span>实时交互、高效稳定、绚丽震撼的数据可视化解决方案</span>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".product-content").slide({effect:"fade",trigger:"click",delayTime:700});
</script>
