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天

知道了
爱彩票 www.3mx.com-彩独-| www.tp74.com-彩票安徽快三怎么玩| www.341542.com-一定牛彩票真假问题| www.509077.com-916全民彩票| www.16sy.com-福彩几天一开奖| www.1497.cm-真实的彩虹图片大全| www.304768.com-怎么玩快三稳赢不输| www.397960.com-七星彩大奖合0的码| www.289326.com-78彩票下载-| www.417584.com-彩绘龙鸟纹漆盘| www.941934.com-重庆分分彩开奖号码| 凤凰Vwww.www.fh7557.com| www.520851.com-福彩最大奖-| www.zt78.com-竞彩篮球加时赛算吗| www.600945.com-一注彩票能种多少钱| www.756544.com-创富彩票正规吗| www.37653.cc-下载9万彩票| www.99836.cc-彩票广告图片搞笑| www.096884.com-好彩网论坛28码| www.69315.cc-竞彩网任九开奖| www.3713.cc-福彩三d组六走势图| www.34166.cc-福彩三d天中图库| www.017592.com-亿发彩票官方网站| www.999605.com-170彩票网首页| www.355615.com-体彩三d走-| www.602943.com-彩虹六号围攻好玩吗| www.994006.com-nba竞彩推荐| www.895368.com-大中华彩票客服| www.512257.com-彩铅插图简单又漂亮| www.627277.com-旺彩平台下载| www.54096.com-7星彩兑奖模式| www.046172.com-官方网络售彩| www.81yt.com-永利彩投合法吗| www.pq94.com-新彩福彩3d字谜画| www.408777.com-6月27号体育彩票| www.311155.com-神圣彩票下载| 凤凰彩票www.77801q.com| www.3022.vip-体彩排列三克皇一胆| www.57512.cc-下载江苏e球彩助手| 818合彩www.07hc.com| www.sx18.com-七星彩组选中奖方式| www.07780.com-彩票长龙统计网站| www.cai0666.com快三奖金表-| www.k66.org-上海快三软件真的吗| www.127471.com-电脑版彩客网首页| www.101884.com-稳赢的买彩票方法| www.198573.com-大发快三推算下期| www.269494.com-西官彩-| www.8515.biz-如何举报黑彩平台| www.60155.com-福彩新规-| www.22mw.com-体育彩票贪案| www.0165.tv-有彩色系的三属性有| www.21ve.com-状元彩票网平台| www.097783.com-3d和值尾中彩网| www.028892.com-亿彩堂骗局-| www.8672.cn-体彩是否有假货| www.002405.com-3d彩易网-| www.107085.com-网易五分彩必中| www.1781.vip-409彩票-| www.672508.com-电玩8彩票app| www.769202.com-彩票女什么意思| www.836208.com-喜中彩票彩天下| www.912826.com-手机新浪彩票双色球| www.977810.com-富彩彩票安全吗| www.cai8883.com河北快三预测今天| www.60245.com-网络江苏快三黑彩| www.541520.com-36o购彩-| www.612654.com-分分彩有没有万能码| www.295204.com-体彩排列5中奖规则| www.381441.com-传统足彩首页| www.498751.com-彩票车是什么| www.585073.com-好彩宴会厅-| www.672959.com-排三排五乐彩论坛| www.905082.com-武汉彩票店转让信息| www.976185.com-河南新乡娶媳妇彩礼| www.0yy.com-手机淘宝从哪买彩票| www.299203.com-306.com彩票| www.420862.com-体彩店怎么装修好看| www.538909.com-云南时时彩快乐十分| www.639493.com-豪华彩票店-| www.722459.com-微信快三-| www.801841.com-福彩杀号-| www.875362.com-快钱彩票app| www.954042.com-乐和彩竞彩是正规吗| www.be.com-贵州快三官方网站| www.lb23.com-潮信彩票端-| www.888752.com-78彩票下载安装| www.987029.com-万博彩票怎么下| www.eo39.com-一分快三投注技巧| www.l06.cn-福彩中彩网-| www.73dn.com-一般买彩票在哪里买| www.2825.xyz-体育彩票复式计算器| www.05456.cc-彩票禁止网上购买了| www.671397.com-88zzcc天下彩| www.788768.com-福彩三天计划的| www.862874.com-快三购买时间| www.042618.com-网上买足彩合法吗| www.569393.com-体彩排列三三句话| www.85206.com-体彩福彩双彩店转让| www.366583.com-黑彩怎么定罪| www.9973.online结婚要彩礼的国家| www.16636.cc-彩神软件官方手机版| www.311967.com-甘肃省体彩兑奖中心| www.010234.com-体彩加盟-| www.53084.com-天津时时彩怎么停了| www.73vu.com-广东快乐十分彩官网| www.8411.net-做博彩程序员犯法嘛| www.70955.cc-龙之彩是不是黑平台| www.883712.com-最新平台送彩金| www.cp3352.com-一分快三有没有官网| www.202496.com-快三胆拖是什么意思| www.422559.com-怎样办理彩票投注站| www.553068.com-时时彩打流水方法| www.687169.com-体彩竞猜足球结果| www.766038.com-鸿运彩票画规软件| www.835517.com-福彩双色球26期| www.899487.com-彩81专属app| www.966932.com-彩票网手机客户端| 大赢家彩票www.542911.com| www.206423.com-广东福彩快乐彩| www.82dl.com-大乐透预测牛彩网| www.288585.com-体彩宣传语-| www.457209.com-体彩字迷大全| www.594978.com-京东彩票客户端| www.715197.com-有计划群的彩票软件| www.828529.com-218彩票网-| www.971934.com-乐彩网双色球首页| www.523048.com-时时彩杀一码公式| www.674678.com-红蚂蚁团队彩票| www.122223.com-鲍彩票-| www.745904.com-红彩会手机登录| www.657906.com-福彩彩票机子说明书| www.771006.com-快三和值概率| www.868179.com-海南七星彩最新规律| www.974188.com-卓易彩票下载| www.lj63.com-豪彩软件下载| www.870963.com-江苏休育彩票| www.936885.com-菲律宾合法彩票平台| 丰彩娱乐www.fcyl2.com| www.al71.com-贵州体彩7位数| www.657234.com-3d时时彩破解| www.799620.com-彩票查询体彩排列五| www.ug8.com-百宝彩河北快三| www.239600.com-一通快三赌博案| www.12628.cc-官方体育彩票app| www.57391.cc-立彩助手邀请码| www.019824.com-彩之星江苏快3主题| www.449365.com-买彩票如何不赔| www.863834.com-最可靠快三投注| www.565673.com-今晚福彩3d怪字图| www.100062.cc-星炫彩票-| www.062861.com-网上还不能买彩票吗| www.6662.bid-18彩app靠谱吗| www.572050.com-福彩三d的开奖| www.317662.com-中国福彩官网首页| www.7338.biz-彩虹7隐身无人机| www.67832.cc-公务员彩票中奖| www.cp3320.com-一分快三合法吗| www.51ju.com-足彩大富翁手机版| www.979664.com-香港二四彩开奖结果| www.tk95.com-公益福彩是真实的吗| www.266172.com-体彩排列三奖号| www.507696.com-怎么关注老猫彩快讯| www.800837.com-彩票在平台玩犯法吗|