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>
