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.695548.com-竞彩足球澳客网| www.f99.space-彩票统计软件| www.070891.com-彩票365软件| www.237527.com-福彩3b字迷-| www.363752.com-彩虹色头发-| www.555047.com-如果彩票中了10亿| www.671193.com-列三杀号定胆彩经网| www.785745.com-领航彩票计划| www.623365.cc-辽宁褔彩-| www.792835.com-彩票领奖后怎么离开| www.918654.com-u9彩票的网址| www.993208.com-彩票那个容易赚钱| www.mp41.com-吉林快三有窍门吗| www.80nf.com-盛世彩票是骗局吗| www.068188.com-彩票app如何开发| www.50014.com-华宇彩票能提现吗| www.774023.com-福乐彩28怎么玩| www.ug28.com-靠谱私彩平台| www.322123.com-779彩票讨论组| www.455392.com-福乐彩开奖号码| www.819883.com-彩礼钱高句子| www.954517.com-彩宝彩票app骗人| www.cai2323.com彩票快3技巧| www.18599.com-竞彩足球跟单风险| www.266110.com-福彩2d中奖规则表| www.027786.com-福利彩票幸运彩| www.51804.com-奥陶彩票app下载| www.213249.com-下载彩计划app| www.430766.com-会员登陆一永利彩票| www.419870.com-印象彩票下载安装| www.901738.com-彩票奖金计算| 鑫亿彩www.095069.com| www.st70.com-稳定的时时彩平台| www.682551.com-500彩票网下载| www.773220.com-时时彩心得和技巧| www.859163.com-七星彩明月-| www.927697.com-手机彩票是赌博吗| www.981217.com-老吴竞彩推荐| www.xa7.com-大发快三彩票开奖| www.ts50.com-彩票平台大厅合买| www.089663.com-七乐彩中3多少钱| www.3516.cn-天天爱彩票人工客服| www.001785.cc-足彩竞彩网直播| www.083063.com-休体彩票31选7| www.5498.tv-福利彩票是加盟店么| www.103356.com-吉林省快三前一千期| www.373807.com-彩智-| www.003756.com-快三形态走势图| www.108516.com-新版本众彩网下载| www.190650.com-三分三块彩票合法吗| www.889850.com-七乐彩是从那年开始| www.zl80.com-大发彩票坑人| www.9956.pw-198彩平台下载| www.396344.com-云上多彩宝-| www.521426.com-彩托有那些骗术| www.847282.com-快三多久出一次| www.947545.com-快三买大小技巧| 凤凰彩票www.3479a.com| www.672039.com-500彩是啥-| www.790762.com-彩票随机模拟器| www.kb61.com-中国福利彩票分析| www.001263.com-广西快三会作假吗| www.954875.com-瑞彩祥云快三安全吗| www.fv39.com-福彩腐案-| www.81ar.com-手机3d彩神通| www.587957.com-福彩3d全年开奖号| www.680667.com-幸运彩票网页版计划| www.795971.com-132彩票网页版| www.922783.com-福利彩票站转让费| www.cb77.com-彩51彩票下载| www.06cn.com-彩铅星空-| www.916.tv-武汉福彩站点申请| www.8007.pw-休彩足球-| www.003399.com-众恒彩票-| www.499665.com-北京五分彩注册| www.717559.com-彩客网完整版比分| www.960855.com-快三全天一期计划| www.eg44.com-湖北体彩前三直遗漏| www.199411.com-河北福彩快三| www.982408.com-时时彩开奖视频直播| www.f48.net-香港赛马彩票| www.39pf.com-海南七星彩网上购买| www.299.pw-1288购彩平台| www.999746.com-彩票996是骗人的| www.662852.com-竞彩怎么买怎么死| www.744260.com-买彩票判刑-| www.814036.com-福彩快开-| www.889124.com-彩宝店-| www.963252.com-网投一分快三合法吗| 快彩www.81678w.com| www.m21.site-快3骰子彩票在哪买| www.29796.cc-山东彩票在线app| www.835967.com-丰彩一等奖-| www.922528.com-足彩经验-| www.984274.com-二分彩官网-| www.oj5.com-甘肃快三app| www.809570.com-福彩3d网冠彩| www.969384.com-酷彩香港专卖店地址| www.374944.com-36体彩走势图| www.a04.top-上海快三单双预测| www.953097.com-彩神争霸犀牛彩票| PK彩票www.www.23040.com| www.47pb.com-松坂桃李刚力彩芽| www.569595.com-彩票打票员好学吗| www.036155.com-彩票大数据app| www.18538.cc-彩票最大奖是多少| www.44th.com-彩票有多黑-| www.795815.com-彩票魔术-| www.678670.com-19043期七星彩| www.791844.com-万博博彩app下载| www.910970.com-七星彩开将-| www.515630.com-网上买彩票赔了5万| www.538577.com-正版大花虎彩报| www.lb39.com-中彩网客户终端下载| www.885317.com-彩票收藏及图片| www.531935.com-老版彩库宝典手机安| www.026472.com-亿博彩app-| www.5738.cc-黑彩曝光-| www.05222.com-彩一app-| www.871647.com-利彩网站-| www.947509.com-大奖网彩票安卓| www.987724.com-福彩双色球机选号| www.xf.com-彩票倍投-| www.kp69.cc-彩票赚钱平台注册送| www.d98.cc-全民彩票官方| www.615970.com-北京速开彩是个骗局| www.708633.com-中国足球体育竞彩网| www.883186.com-678彩-| www.971346.com-重庆福彩下载| www.wd84.com-体彩排3试机号今天| www.77hx.com-r8国际彩票注册地| www.72927.com-长沙中国的彩票| www.211352.com-东北人玩彩独胆| www.686644.com-福彩3d一千个号码| www.g88.live-体彩排三的试机号| www.56dd.com-手机彩票刮奖| www.dj77.cc-中福彩票坑人| www.3168.in-彩票开奖查询源码| www.8413.loan-七星彩三字定卖| www.288659.com-彩票什么叫长龙| www.37rj.com-体彩主任魏吉祥照片| www.362081.com-大富彩票不让提现| www.298211.com-河南七星彩兑奖地点| www.2945.cn-体彩店装饰图| www.22538.cc-手机购彩是骗局吗| www.oi52.com-高频彩票官方开奖网| www.791697.com-七乐彩在线中奖查询| www.856519.com-辽宁福彩3d走试图| www.949509.com-宝丽彩票-| 500彩票www.202439.com| www.668146.com-彩票幕后老板邓| www.739316.com-吉祥彩娱乐平台登录| www.822122.com-手机彩票能兑奖吗| www.895663.com-大中华彩票可信吗| www.949508.com-2018彩库宝典| www.984609.com-彩虹网彩票网合法吗| www.cp20.cc-彩票顺口溜-| www.029985.com-yy彩票-| www.392981.com-昨日彩票双色球| www.575202.com-彩票王的秘诀| www.j97.cc-深圳福彩中心官网| www.557524.com-彩票中奖交税过程| www.284566.com-赢彩彩票官网| www.491236.com-什么是小盘彩票|