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天

知道了
百盈PK10 www.504233.com-奔驰彩票网投客户端| www.505065.com-牛彩跨度谜-| www.355621.com-福彩3d绝技-| www.487133.com-高频彩连续追号| www.582548.com-重庆时时彩官方平台| www.700188.com-福利彩票有几种类型| www.833006.com-77彩票网址-| www.932896.com-彩票20秒开一期| 8号彩票www.60108s.com| www.137821.com-七星彩缩水工具| www.331072.com-棋牌彩票网址大全| www.8gz.com-足彩310报电子版| www.661046.com-9号彩票平台登录| www.750063.com-旺彩彩票查询| www.817115.com-跑狗图58彩开奖| www.382803.com-彩铅笔绘画学生用| www.522044.com-武威附近体彩销售点| www.605372.com-三d彩色打印机出租| www.694421.com-中体彩地址-| www.773949.com-花生彩票官方网站| www.859665.com-湖北快三跨度和值表| www.948990.com-福利彩票3d下载| 天下彩www.499680.com| www.515244.com-七星彩南国彩票社区| www.46197.com-时时彩稳定在线计划| www.0762.org-彩神通双色球免费版| www.085066.com-天天赢彩票靠谱吗| www.15051.cc-所有的彩票网址| www.412132.com-苹果手机原彩是什么| www.713501.com-中彩那天的词语组词| www.880652.com-彩83彩票-| www.6ws.cc-赠送彩票营销| www.93ov.com-中国最早的彩照| www.85la.com-呼市转彩票机流程| www.04099.com-福彩双色中奖说明| www.639364.com-500新型体彩店| www.839097.com-微彩娱乐下载| www.972388.com-福彩3d排列三魔图| www.030808.com-彩61邀请码-| www.34162.com-彩虹玫瑰多少钱| www.9627.cm-彩绳编发七彩色| www.655623.com-山西吕梁彩礼价目表| www.605332.com-彩票老平台-| www.fu22.com-bb快乐彩-| www.359736.com-85彩票下载安装| www.96802.com-竞彩中奖概率最高| www.04128.cc-彩票306是啥| www.827508.com-官方三分彩走势图| www.60472.com-福气彩票站-| www.507818.com-19043期7星彩| www.75216.com-福彩十元刮刮乐图片| www.033223.com-网易福彩下载安装| www.121356.com-彩票开奖网查询| www.163811.com-机选彩票号码| www.y35.hk-彩票齐中网看图解码| www.043767.com-福利彩票术语| www.69193.com-福彩守号有用吗| www.7435.cc-顶级彩票安全吗| www.do68.com-排列3走势图彩宝网| www.144466.com-老时时彩下载手机版| www.478874.com-彩通色卡官网| www.696617.com-彩票预测推荐3d| www.682765.com-彩票app哪个最好| www.520305.com-体彩专家三天计划| www.704467.com-为什么穷人爱买彩票| www.203578.com-七乐彩几个号算中奖| www.bl06.com-下载内蒙古快三助手| www.083117.com-几分钟开奖的彩票| www.1514.pw-呼和浩特彩票大奖| www.042877.com-竞彩店和体彩店区别| www.508856.com-申请东莞福彩中心| www.592201.com-彩票站一张挣多少钱| www.715234.com-彩神8快1-| www.634605.com-博创彩票是正规的吗| www.774568.cc-永利彩票注册平台| www.867569.com-快三分析大师| www.938712.com-双赢彩票诈骗吗| www.985608.com-正义彩虹志愿者协会| www.va8.com-福彩七乐开奖结果| www.8714.vip-今天有大乐透彩票吗| www.043624.com-足球彩票怎么买不亏| www.125726.com-厦门福彩-| www.673669.com-古建彩绘怎样立粉| www.356124.com-微信分分彩计划| www.652025.com-红牛快三骗局| www.201247.com-广西福彩快乐十分| www.356147.com-体彩属于哪个部门管| www.559000.com-彩种开奖网源码| www.637641.com-彩虹6号为什么火了| www.355644.com-和彩心得与技巧| www.335576.com-湖北快三怎么预测的| www.517362.com-可以购彩的网站| www.539774.com-彩20下载到手机| www.376801.com-体育彩票店内装修| www.875312.com-澳客彩票网官网网| www.947791.com-福彩什么时候开| 88爱彩www.88ac.com| www.ki13.com-体彩网大乐透计算器| www.g43.com-彩宝软件下载| www.7575.tv-东方彩票app平台| www.53569.cc-微信快三赌博| www.1229.pw-彩计划app9cb| www.499494.com-彩票133平台靠谱| www.775497.com-北斗福彩3d预测| www.41586.com-福利彩票破解| www.689752.com-444彩票-| www.29969.cc-彩票平台套利风控| www.67.cx-快三开奖改时间了| www.964945.com-166手机彩票网| www.bs00.cc-11选5手机购彩| www.35uy.com-辽宁福彩三地走势图| www.cai8577.com手机体彩福彩网| www.791108.com-快三破解辅助器| www.891383.com-福彩彩票广告词| www.l04.net-利用大数定律玩彩票| www.981931.com-红彩会彩票下载| www.189863.com-快三开奖结果一定| www.330793.com-大发彩票手机靠谱吗| www.497563.com-pk彩官网-| www.566601.com-体彩组选3开奖| www.637267.com-彩虹桥图片-| www.121347.com-体彩排列五选号法| www.mt04.com-时时彩四星大底漏洞| www.46.me-博雅彩票手机版下载| www.469249.com-彩票关注码-| www.569393.com-体彩排列三三句话| www.695099.com-足彩稳胆规律| www.793502.com-胜彩娱乐可信吗| www.e14.loan-怎么下载博彩app| www.419567.com-必发彩票平台安全吗| www.998941.com-头条彩票频道| www.6894.biz-七彩阳光一至五节| www.b39.xyz-尊彩网官网注册| www.725399.com-体育彩票不是赌博| www.830108.com-福彩网易3d-| www.934445.com-体彩大乐透中奖高不| 彩乐乐www.cll168.com| www.gq83.com-好彩彩票合法吗| www.5ma.cc-体彩排三钓翁三字诀| www.ty50.com-彩票高手怎样买彩票| www.as09.com-湖北彩票精彩十分| www.c44.net-360彩票预测| www.16ep.com-彩经网双色球杀蓝| www.121461.com-彩芽天然好奇心图片| www.230222.com-盈彩在线合法吗| www.145598.com-体彩p3今天开奖号| www.269187.com-v10彩票app-| www.416378.com-福利彩票3d魔图| www.552080.com-玖玖彩票网网登录| www.656629.com-m5彩票下载-| www.872042.com-毕节彩票站有哪些| www.929349.com-七星彩千位是哪位| www.984658.com-8号彩票2018| www.e25.club-旺彩百家双色球| www.90vi.com-体育彩票投资多少钱| www.88304.com-洛阳快三怎么玩稳赚| www.075286.com-千里马福彩推荐号| www.882583.com-诚信可靠的高频彩种| www.692001.com-有玩快三是真的吗| 全民彩票www.qm72.com| www.40010.cc-彩票助手加奖最多| www.78951.cc-福彩差5运用| www.216952.com-省份快三-| www.372022.com-体育彩票大乐透几点|