jquery企業(yè)建站解決方案展示內(nèi)容選項卡切換效果，通過鼠標(biāo)懸停導(dǎo)航標(biāo)簽欄，切換對應(yīng)內(nèi)容效果代碼?；趕uperslide插件開發(fā)簡單易用，下載即可使用。
使用方法：
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="solution-box">
<div class="solution-bj">
<div class="solution-header">
<h2>為您量身定制解決方案</h2>
<p>滿足廣泛的業(yè)務(wù)需求</p>
</div>
<div class="solution-content clearfix">
<div class="solution-list hd">
<ul>
<li class="on">
<h2>電商解決方案</h2>
</li>
<li>
<h2>車聯(lián)網(wǎng)解決方案</h2>
</li>
<li>
<h2>制造解決方案</h2>
</li>
<li>
<h2>游戲解決方案</h2>
</li>
<li>
<h2>安全解決方案</h2>
</li>
<li>
<h2>通用解決方案</h2>
</li>
<li>
<h2>DevOps解決方案</h2>
</li>
</ul>
</div>
<div class="solution-item bd">
<ul style="display:block">
<li>
<div>
<h2>電商解決方案</h2>
<p>結(jié)合豐富的行業(yè)平臺服務(wù)和基礎(chǔ)云服務(wù)，提供端到端電商解決方案，構(gòu)建企業(yè)自有電商生態(tài)?？煽焖俅罱娚唐脚_，快速完成所有資源的創(chuàng)建和配置</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon1-1.png" alt=""></i>
<p>家電數(shù)碼</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon1-2.png" alt=""></i>
<p>跨境貿(mào)易</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon1-3.png" alt=""></i>
<p>鞋服</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo1.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo2.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo3.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>車聯(lián)網(wǎng)解決方案</h2>
<p>依托“端-管-云”優(yōu)勢，提供包括IoT、大數(shù)據(jù)分析、應(yīng)用使能以及安全管理等服務(wù)，構(gòu)建面向億級聯(lián)接的車聯(lián)網(wǎng)云平臺，助力企業(yè)向出行服務(wù)提供商轉(zhuǎn)型，讓人車生活更智能</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon2-1.png" alt=""></i>
<p>新能源車監(jiān)管</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon2-2.png" alt=""></i>
<p>智慧停車</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon2-3.png" alt=""></i>
<p>T-BOX邊緣計算</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo4.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo5.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo6.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>制造解決方案</h2>
<p>結(jié)合近30年工業(yè)制造經(jīng)驗和基礎(chǔ)云服務(wù)，基于全流程整合能力打造的可信、開放工業(yè)云服務(wù)平臺，為制造企業(yè)提供端到端的數(shù)字化轉(zhuǎn)型解決方案，助力企業(yè)數(shù)字化，智能化升級</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon3-1.png" alt=""></i>
<p>云設(shè)計</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon3-2.png" alt=""></i>
<p>云仿真</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon3-3.png" alt=""></i>
<p>云MES</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo15.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo18.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo7.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>游戲解決方案</h2>
<p>我們的服務(wù)涵蓋游戲整個生命周期,從構(gòu)建基礎(chǔ)設(shè)施,到快速發(fā)布游戲,再到游戲精細(xì)化運營,直到推廣創(chuàng)收,騰訊云“互聯(lián)網(wǎng)+游戲”全部覆蓋業(yè)界領(lǐng)先的BGP網(wǎng)絡(luò)、節(jié)點遍布全國</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon4-1.png" alt=""></i>
<p>游戲云端</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon4-2.png" alt=""></i>
<p>游戲容器部署</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon4-3.png" alt=""></i>
<p>游戲開發(fā)</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo14.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo13.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo12.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>安全解決方案</h2>
<p>云以安全能力為基石，以法律法規(guī)遵從為城墻，以安全生態(tài)為護城河，構(gòu)建起面向不同行業(yè)的保障體系，為客戶提供一站式的安全解決方案，幫助客戶快速、低成本完成安全整改</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon5-1.png" alt=""></i>
<p>通用安全</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon5-2.png" alt=""></i>
<p>等保合規(guī)安全</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon5-3.png" alt=""></i>
<p>SAP安全</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo4.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo5.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo6.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>通用解決方案</h2>
<p>基于豐富的基礎(chǔ)云服務(wù)，為解決跨行業(yè)共性問題而提供的統(tǒng)一技術(shù)架構(gòu)的、適用于多行業(yè)的、預(yù)集成的產(chǎn)品與能力的組合，以滿足客戶ICT業(yè)務(wù)上云的需求</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon6-1.png" alt=""></i>
<p>SAP</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon6-2.png" alt=""></i>
<p>HPC</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon6-3.png" alt=""></i>
<p>移動互聯(lián)</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo7.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo8.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo10.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div>
<h2>DevOps解決方案</h2>
<p>基于項目管理、代碼托管、持續(xù)集成、測試、部署、發(fā)布、流水線等端到端工具鏈，使能軟件企業(yè)或團隊?wèi)?yīng)用DevOps方法論與優(yōu)秀實踐，將軟件產(chǎn)品價值持續(xù)交付給最終用戶</p>
<a href="javascript:;" class="s-btn solution-more">了解更多<em></em></a>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>推薦解決方案</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon7-1.png" alt=""></i>
<p>軟件實訓(xùn)</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon7-2.png" alt=""></i>
<p>游戲開發(fā)</p>
</a>
</div>
<div class="solution-brand-item">
<a href="#">
<i><img src="images/icon7-3.png" alt=""></i>
<p>電商雙交付</p>
</a>
</div>
<div class="solution-brand-item">
<a href="javascript:;" class="s-btn solution-more">查看更多<em></em></a>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="solution-title">
<h3>案例和合作伙伴</h3>
<span></span>
</div>
<div class="solution-brand clearfix">
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo17.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo18.png" alt="">
</a>
</div>
<div class="solution-brand-item clear">
<a href="#">
<img src="images/logo15.png" alt="">
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="solution-more-wrap">
<a href="javascript:;" class="s-btn solution-more">查看所有解決方案<em></em></a>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".solution-content").slide({});
</script>
jquery大氣企業(yè)解決方案選項卡布局代碼 
