jquery云產(chǎn)品介紹圖標(biāo)菜單tab切換代碼

jquery企業(yè)云服務(wù)產(chǎn)品介紹點(diǎn)擊圖標(biāo)菜單tab切換效果代碼。基于SuperSlide制作的圖標(biāo)選項(xiàng)卡tab代碼。簡(jiǎn)單易用，下載即可使用，

使用方法：

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>了解我們的云產(chǎn)品</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">互聯(lián)網(wǎng)中間件</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">域名與網(wǎng)站</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">視頻服務(wù)</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">大數(shù)據(jù)</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="product-switch bd">
		<ul class="product-list">
			<li class="product-list-item">
				<h3>
					<a href="#">
						負(fù)載均衡  <i>折扣</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>對(duì)多臺(tái)服務(wù)器進(jìn)行流量分發(fā)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">消息隊(duì)列
				   </a>
				</h3>
				<div class="product-list-text">
					<span>分布式消息隊(duì)列服務(wù)</span>
				</div>

			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">API 網(wǎng)關(guān)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>API 全生命周期托管服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">騰訊分布式服務(wù)框架
				   </a>
				</h3>
				<div class="product-list-text">
					<span>可靠、全面、易用的分布式服務(wù)PaaS平臺(tái)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">云數(shù)據(jù)遷移
				   </a>
				</h3>
				<div class="product-list-text">
					<span>TB/PB 級(jí)數(shù)據(jù)遷移上云</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">日志服務(wù)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>一站式日志數(shù)據(jù)解決方案</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">私有云存儲(chǔ)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>安全、穩(wěn)定、海量、多協(xié)議兼容的私有云存儲(chǔ)服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">存儲(chǔ)網(wǎng)關(guān)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>混合云存儲(chǔ)服務(wù)</span>
				</div>
			</li>
		</ul>
		<ul class="product-list">
			<li class="product-list-item">
				<h3>
					<a href="#">
						域名注冊(cè)  <i>優(yōu)惠</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>專業(yè)域名服務(wù)，安全、省心、可信賴</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">云解析
				   </a>
				</h3>
				<div class="product-list-text">
					<span>向全網(wǎng)域名提供穩(wěn)定、安全、快速的智能解析服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">建站主機(jī)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>全方位，超便捷的網(wǎng)站服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">網(wǎng)站備案
				   </a>
				</h3>
				<div class="product-list-text">
					<span>備案?jìng)涠嗑?，云服?wù)免費(fèi)用多久</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">SSL證書
				   </a>
				</h3>
				<div class="product-list-text">
					<span>數(shù)字證書一站式管理，快速接入 HTTPS 安全</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">移動(dòng)解析HttpDNS
				   </a>
				</h3>
				<div class="product-list-text">
					<span>防劫持、智能調(diào)度、穩(wěn)定可靠的移動(dòng)APP域名解析服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">企業(yè)郵箱
				   </a>
				</h3>
				<div class="product-list-text">
					<span>提供最全面、最專業(yè)、專屬定制的企業(yè)郵件服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">檢測(cè)工具
				   </a>
				</h3>
				<div class="product-list-text">
					<span>自動(dòng)診斷域名、SSL證書狀態(tài)，保障網(wǎng)站安全</span>
				</div>
			</li>
		</ul>
		<ul class="product-list">
			<li class="product-list-item">
				<h3>
					<a href="#">
						網(wǎng)絡(luò)安全  <i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>抵御大流量DDoS攻擊，守護(hù)企業(yè)網(wǎng)絡(luò)安全</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">網(wǎng)站管家 WAF
				   </a>
				</h3>
				<div class="product-list-text">
					<span>專業(yè)為網(wǎng)站服務(wù)的一站式智能安全防護(hù)平臺(tái)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">云鏡（主機(jī)安全）
				   </a>
				</h3>
				<div class="product-list-text">
					<span>基于機(jī)器學(xué)習(xí)為用戶提供檢測(cè)和預(yù)警服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">
						Web 漏洞掃描<i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>便捷、準(zhǔn)確的漏洞掃描服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">專家服務(wù)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>騰訊安全專家提供專業(yè)技術(shù)支持服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">移動(dòng)安全
				   </a>
				</h3>
				<div class="product-list-text">
					<span>防止破解盜版，對(duì)抗游戲外掛等一站式移動(dòng)安全解決方案</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">業(yè)務(wù)防控（天御）
				   </a>
				</h3>
				<div class="product-list-text">
					<span>登錄注冊(cè)防撞庫(kù)，活動(dòng)防刷、防薅羊毛</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">內(nèi)容安全
				   </a>
				</h3>
				<div class="product-list-text">
					<span>精準(zhǔn)識(shí)別圖文、視頻中色情、暴恐、廣告等惡意內(nèi)容</span>
				</div>
			</li>
		</ul>
		<ul class="product-list">
			<li class="product-list-item">
				<h3>
					<a href="#">
						點(diǎn)播  <i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>一站式媒體轉(zhuǎn)碼分發(fā)平臺(tái)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">直播
				   </a>
				</h3>
				<div class="product-list-text">
					<span>專業(yè)穩(wěn)定快速的直播接入和分發(fā)服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">云轉(zhuǎn)碼
				   </a>
				</h3>
				<div class="product-list-text">
					<span>智能、強(qiáng)悍、全面的云端轉(zhuǎn)碼和音視頻處理服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">互動(dòng)直播
				   </a>
				</h3>
				<div class="product-list-text">
					<span>多平臺(tái)的音視頻開播、觀看及連麥等互動(dòng)直播能力</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">移動(dòng)直播
				   </a>
				</h3>
				<div class="product-list-text">
					<span>基于 RTMP SDK 快速集成的移動(dòng)直播解決方案</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">短視頻
				   </a>
				</h3>
				<div class="product-list-text">
					<span>結(jié)合強(qiáng)大的云端能力，提供客戶端豐富的拍攝、編輯等短視頻功能</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">美視優(yōu)享
				   </a>
				</h3>
				<div class="product-list-text">
					<span>專業(yè)的視頻鑒黃、美顏特效服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">X-P2P
				   </a>
				</h3>
				<div class="product-list-text">
					<span>業(yè)內(nèi)最優(yōu)的低延遲 P2P 解決方案</span>
				</div>
			</li>
		</ul>
		<ul class="product-list">
			<li class="product-list-item">
				<h3>
					<a href="#">
						大數(shù)據(jù)處理套件  <i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>可靠、安全、易用，可以按需部署的大數(shù)據(jù)處理服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">彈性 MapReduce
				   </a>
				</h3>
				<div class="product-list-text">
					<span>可靠、安全、靈活的云端托管Hadoop服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">
						流計(jì)算服務(wù)<i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>云端的流式數(shù)據(jù)匯聚、計(jì)算服務(wù)，滿足您實(shí)時(shí)處理數(shù)據(jù)的需求</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">
						Elasticsearch Service<i>新品</i>
					</a>
				</h3>
				<div class="product-list-text">
					<span>云端托管的 Elasticsearch 服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">數(shù)據(jù)工坊
				   </a>
				</h3>
				<div class="product-list-text">
					<span>輕量級(jí)云上大數(shù)據(jù)處理分析服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">云推薦引擎
				   </a>
				</h3>
				<div class="product-list-text">
					<span>快速提供安全、便捷、精準(zhǔn)、可靠的推薦系統(tǒng)服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">DI-P實(shí)時(shí)多維分析引擎
				   </a>
				</h3>
				<div class="product-list-text">
					<span>無(wú)需預(yù)建數(shù)據(jù)立方的大數(shù)據(jù)毫秒級(jí)多維分析服務(wù)</span>
				</div>
			</li>
			<li class="product-list-item">
				<h3>
					<a href="#">大數(shù)據(jù)可視交互系統(tǒng)
				   </a>
				</h3>
				<div class="product-list-text">
					<span>實(shí)時(shí)交互、高效穩(wěn)定、絢麗震撼的數(shù)據(jù)可視化解決方案</span>
				</div>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
	
	jQuery(".product-content").slide({effect:"fade",trigger:"click",delayTime:700});

</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

0 11683 59

軟件 Dreamweaver
格式 HTML
作者歪秀
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請(qǐng)勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識(shí)產(chǎn)權(quán)，如知識(shí)產(chǎn)權(quán)權(quán)利人認(rèn)為平臺(tái)內(nèi)容涉嫌侵權(quán)，可通過(guò)郵件：3264130392@qq.com提出書面通知，我們將及時(shí)處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國(guó)旗、國(guó)徽、黨徽...），目的在于配合國(guó)家政策宣傳，僅限個(gè)人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。