QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery大气企业解决方案选项卡布局代码

原创商用 jquery大气企业解决方案选项卡布局代码

jquery企业建站解决方案展示内容选项卡切换效果,通过鼠标悬停导航标签栏,切换对应内容效果代码。基于superslide插件开发简单易用,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>满足广泛的业务需求</p>
		</div>
		<div class="solution-content clearfix">
			<div class="solution-list hd">
				<ul>
					<li class="on">
						<h2>电商解决方案</h2>
					</li>
					<li>
						<h2>车联网解决方案</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>结合丰富的行业平台服务和基础云服务,提供端到端电商解决方案,构建企业自有电商生态。可快速搭建电商平台,快速完成所有资源的创建和配置</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>家电数码</p>
									</a>
								</div>
								<div class="solution-brand-item">
									<a href="#">
										<i><img src="images/icon1-2.png" alt=""></i>
										<p>跨境贸易</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>车联网解决方案</h2>
							<p>依托“端-管-云”优势,提供包括IoT、大数据分析、应用使能以及安全管理等服务,构建面向亿级联接的车联网云平台,助力企业向出行服务提供商转型,让人车生活更智能</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>新能源车监管</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>结合近30年工业制造经验和基础云服务,基于全流程整合能力打造的可信、开放工业云服务平台,为制造企业提供端到端的数字化转型解决方案,助力企业数字化,智能化升级</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>云设计</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>我们的服务涵盖游戏整个生命周期,从构建基础设施,到快速发布游戏,再到游戏精细化运营,直到推广创收,腾讯云“互联网+游戏”全部覆盖业界领先的BGP网络、节点遍布全国</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>游戏开发</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>云以安全能力为基石,以法律法规遵从为城墙,以安全生态为护城河,构建起面向不同行业的保障体系,为客户提供一站式的安全解决方案,帮助客户快速、低成本完成安全整改</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>等保合规安全</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>基于丰富的基础云服务,为解决跨行业共性问题而提供的统一技术架构的、适用于多行业的、预集成的产品与能力的组合,以满足客户ICT业务上云的需求</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>移动互联</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>基于项目管理、代码托管、持续集成、测试、部署、发布、流水线等端到端工具链,使能软件企业或团队应用DevOps方法论与优秀实践,将软件产品价值持续交付给最终用户</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>软件实训</p>
									</a>
								</div>
								<div class="solution-brand-item">
									<a href="#">
										<i><img src="images/icon7-2.png" alt=""></i>
										<p>游戏开发</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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩票123现在叫什么名字 www.373122.com-吉林快三改时间了| www.36zs.com-竞彩足球九场奖金| www.23mg.com-南充市福彩网官网| www.036568.com-3d通福彩在哪下载| www.159159.com-福利彩票的走势| www.324792.com-3d彩票字谜-| www.995418.com-易彩堂犯法吗| www.tx98.com-彩票开奖3d试机号| www.78vf.com-彩票暴富小说| www.77wq.com-怎么购买国外彩票| www.4378.vip-福州福利彩票| www.701742.com-快三开奖北京| www.815017.com-彩票机投放-| www.905233.com-伯爵彩票娱乐平台| www.974130.com-福利彩票猜大小单双| www.cp1218.com-快三计划群真的假的| www.uh58.com-彩票简介-| www.18rl.com-彩票复式中奖查询| www.825.cc-时时彩振幅的口诀| www.6649.org-38彩票网址是什么| www.wp32.com-我要搜索彩票走勢圖| www.47xl.com-中国竞彩赛果开奖| www.0091.in-名字买彩票-| www.660866.com-下载5百万彩票网| www.762832.com-大发购彩网-| www.136113.com-彩票3000万软件| www.22.vip-香开码结果开奖彩| www.1996.cm-玖富时时彩官方网址| www.34099.com-福建11选5彩经网| www.154888.com-竞彩技巧讲座| www.466245.com-足彩app奖金优化| www.759220.com-上海福彩网正规网站| www.892504.com-彩票榜cpbapp| www.mw64.com-官方彩软件-| www.cp2606.com-江苏快三中奖多少钱| www.00ip.com-像彩虹一样的比喻句| www.523609.com-皇家时时彩软件苹果| www.265973.com-安徽快三三不同号| www.489185.com-22元彩票网-| www.626098.com-旺彩彩票查询双色球| www.708038.com-江西时时彩走势| www.797277.com-八马彩票软件| www.875477.com-说买彩票的幽默话| www.4114.me-福彩有极速赛车吗| www.82477.cc-香港快三app| www.101931.com-足彩4串4是稳赚吗| www.287179.com-彩七星彩票开奖结果| www.439901.com-花呗充值彩票| www.999400.com-e球彩害人-| www.gg85.com-陕西枫安快三| www.zc18.cc-有没有快三公式| www.91249.com-齐鲁福彩三d| www.218366.com-台北快三预测| www.410453.com-足彩盘口水位看胜负| www.523417.com-希腊五分彩开奖号码| www.08592.cc-鸿彩灯光官网| www.96877.cc-彩票主任悔过| www.062376.com-彩乐园下载-| www.838506.com-海南七星彩中奖规则| www.939373.com-彩神88ap-| www.999870.com-500彩票老版本| www.bp14.com-11选5购彩秘籍| www.xk08.com-吉林快三计划打开| www.116559.com-胜负彩19043期| www.128470.com-500万彩软件| www.48kf.com-福彩门户资料大全1| www.772643.com-七七彩票网-| www.916286.com-七星彩私彩代理会员| www.en54.com-玩彩票快三开奖查询| www.89wr.com-商场彩票站出兑转让| www.6724.cm-俄罗斯彩票中奖号码| www.305908.com-福利彩下载-| www.80166.com-棋牌彩票满提现| www.uk12.com-破解腾讯分分彩| www.qi72.com-丰彩彩票官方网站| www.5038.cc-福彩400客服电话| www.x22.top-惜缘体彩胆码| www.271658.com-快三走势图表格下载| www.441229.com-竞彩混合过关规则| www.585726.com-appcp彩票真假| www.06sl.com-全天分快三稳定计划| www.85qa.com-七乐彩周五走势图| www.2147.me-濠江彩票与神童彩开| www.7328.tv-彩票种类有哪些种类| www.31185.cc-78彩票网-| www.72831.com-3d彩界毒王-| www.148001.com-手机购彩安装| www.949528.com-重庆时时彩万能公式| www.4657.biz-福彩3d网址导航| www.23353.cc-众盈彩票官方网站| www.kk57.com-彩票驿站大快3| www.ru72.com-乐艺彩票997| www.35915.com-万博彩票是骗局吗| www.872133.com-q彩app是真的吗| www.60522.com-挂牌彩票网-| www.105062.com-彩票计划苹果版| www.200602.com-手机福利彩票注册| www.885252.com-新利彩票走势图| www.ez06.com-体彩福建任5走势图| www.72js.com-贴吧网上买足彩| www.13257.cc-干货竞彩返还率| www.005979.com-彩71彩票违法吗| www.095527.com-多彩贵州有限公司| www.200022.com-体彩7星彩中奖规则| www.299960.com-彩票走势有规律吗| www.482838.com-有没有两位数的彩票| www.752789.com-澳发彩票下载安装| www.591.cm-中国足彩网欧赔| www.096683.com-千亿彩票平台怎么样| www.j95.com-奥客彩网比分直播| www.305938.com-江西体彩11选择5| www.zz53.com-彩票店布局-| www.603353.com-韩国德国2比0彩票| www.775719.com-与彩票有关网名| www.20bi.com-时时福彩是真的吗| www.286049.com-信誉第一的体育彩票| www.1602.wang-广东体育彩票app| www.590158.com-福彩快3彩票app| www.12755.cc-澳客彩票是合法的吗| www.365990.cc-彩铅画自学难吗| www.bd25.com-一分快三走势图下载| www.202344.com-遵义市福彩-| www.407366.com-破解电脑彩票| www.622096.com-五福彩票网页| www.r72.net-高频彩平台出租价格| www.9249.hk-注册初级彩票培训师| www.076071.com-中国体彩直播| www.388575.com-微信彩友什么意思| www.002175.com-北京快三多久一班车| www.044438.com-足彩略顶-| www.003505.com-说买彩票的幽默话语| www.694565.com-足球彩票去哪里买| www.gf02.com-网络彩票骗局全过程| www.15mm.com-扣扣彩票-| www.087077.com-四季彩票登录一| www.339493.com-查询丹东3d彩图| www.4856.top-梦见彩票站-| www.63od.com-源码彩票平台| www.5028.cm-吉祥彩票的网站| www.681909.com-用什么买彩票官方| www.949509.com-宝丽彩票-| 51彩票www.919588.com| www.12gf.com-2013体彩排列三| www.987506.com-彩票追号投注计算器| www.0hg.com-众乐彩邀请码| www.006447.com-海南七星彩南国论坛| www.ut39.com-90彩票大厅-| www.0253.cm-大发快三玩法视频| www.09909.com-互联网彩票法律法规| www.069229.com-彩神ix充值100| www.227763.com-众彩app-| www.331647.com-彩票官网能买彩票吗| www.986497.com-彩票什么违法| www.201999.com-3d福彩藏机图| www.246243.com-3b走势彩宝-| 吉利彩票www.80075j.com| www.55770.cc-网上七乐彩票| www.442261.com-网易红彩怎么当专家| www.633473.com-快三软件刷分器| www.rj5.com-红牛彩票快三| www.851111.com-竞彩初几开售| www.767205.com-牛彩平台新登录地址| www.246165.com-足彩任9专家预测| www.720997.com-超级团队彩票计划|