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.479472.com-体彩大乐透哪里兑奖| www.4718.cm-七天彩票网上购买| www.066336.com-uc彩票网-| www.834353.com-好彩柠檬好抽吗| www.vi39.com-福彩快三最大遗漏| www.567108.com-彩虹台手机直播苹果| www.593444.com-七彩阳光宾馆| www.750479.com-好彩属于正规的| www.834846.com-炫彩微商3.0| www.905311.com-网上投注彩票| www.989437.com-彩票开奖源万成| www.ce45.com-分分快三预测为网| www.030095.com-香港优彩社区一| www.wx45.com-福利彩票七乐彩| www.76od.com-体彩购买截止时间| www.79901.cc-福彩中心副主任获刑| www.7297.cn-满堂彩官方网站| www.717171.com-彩铅自学难吗| www.77498.com-赢彩网是正规网站吗| www.626820.com-邪恶帝国全彩| www.706704.com-吉林快三预测走势| www.790117.com-36选7好彩3玩法| www.975143.com-大奖快三套路| www.93vj.com-彩照出现时间| www.77532.cc-彩经彩票是正规的吗| www.5696.gg-福彩3d定毒胆绝招| www.034914.com-官方高频彩开奖网| www.87gt.com-金口诀测彩详解| www.76nd.com-河南省彩票网平顶山| www.087150.com-中国上彩票最高奖金| www.200289.com-周五那些彩票开奖| www.302160.com-51中彩提现-| www.32714.com-4月16体彩-| www.135004.com-彩票平台送18彩金| www.67ry.com-熊猫彩电的倒闭| www.8842.biz-福建体彩三十六选七| www.7300.in-彩虹手机电视直播| www.vq34.com-快三带玩彩票| www.853322.com-246天天彩票| www.974105.com-广东福彩双色球规则| www.65jw.com-山西福彩双色球| www.6070.mobi-怎么辨别釉上彩| www.133054.com-25彩票是什么意思| www.677677.cc-南方福彩下载| www.755380.com-豪门汇彩票客服| www.883844.com-乐彩17500-| www.984097.com-福彩3d宣传-| www.xh96.com-七彩投资有限公司| www.028067.com-广东福彩36好彩三| www.q55.gg-长春双阳黑彩贴吧| www.0700.net-易彩堂彩票预测大师| www.30304.com-福彩3d双采图谜| www.001867.com-如何购买世界杯彩票| www.107370.com-必中彩票是正规的吗| www.198726.com-京彩彩票官网| www.25ng.com-华彩公司-| www.629.me-香港天下彩-| www.791346.com-大乐透开奖彩宝网| www.872590.com-快三技巧绝密杀号| www.947094.com-时彩娱乐-| 818合彩www.www.9889hc.com| www.g83.org-彩店宝彩票停运| www.841815.com-福利彩票最近| www.911160.com-福彩群英会中奖规则| www.969540.com-快三二同号单选| 500彩票www.390500.com| www.lh48.com-中福快三下载| www.f50.com-7乐彩专家预测号码| www.32cg.com-福彩星期日走势图| www.463633.com-万豪彩票是合法的吗| www.562635.com-彩吧论坛静态版| www.627295.com-手机256彩票下载| www.692626.com-中国移动积分兑彩票| www.778665.com-彩票快乐彩票| www.852919.com-巨人彩票软件| www.919397.com-宏图娱乐彩票骗局| www.979443.com-快三手机网上买票| www.cp3810.com-甘肃快三计划网页| www.377559.com-彩票店宣传-| www.529009.com-六壬测福彩3d| www.650700.com-唯美水彩-| www.760963.com-福彩双色球中奖省份| www.500774.com-彩色相机软件| www.493.xyz-三d彩报五码图| www.240085.com-蜂鸟团队彩票| www.678662.com-吉利快三1分钟1期| www.940207.com-中国体彩彩票网| www.218221.com-公益福彩是违法的吗| www.374655.com-体彩试机号快报| www.743.cm-时时彩和值投注经验| www.20234.com-彩票谁在控制| www.92884.com-买彩票发疯-| www.102211.com-彩神8是合法网站吗| www.295448.com-彩吧图谜全图| www.167550.com-下载快三助手下载| www.473077.com-七星808彩-| www.665187.com-七乐彩历期开奖数据| www.811033.cc-福彩3d技巧中中中| www.14294.com-七星彩一等奖概率| www.137809.com-彩客310-| www.hf48.com-505彩票下载安装| www.1rl.com-福彩十选五开奖结果| www.185268.com-36先7好彩3结果| www.277208.com-五分钟一次的彩票| www.883329.com-工地彩钢围挡价格| 奔驰彩票www.781566.com| www.664536.com-简单彩铅画风景建筑| www.387429.com-体育彩票店开门时间| www.357385.com-合伙买彩票好吗| www.467979.com-彩迷网福彩3d| www.537028.com-168彩票官方网址| www.494588.com-足彩混合关一定牛| www.698371.com-怎么玩彩票能赚钱| www.838557.com-竞彩盘的图片| www.cp1126.com-彩票平台注册送19| www.929311.com-七星彩152-| www.981114.com-投诉福彩-| www.mi09.com-好彩官方网下载| www.490033.com-深圳体彩11选五| www.88217.cc-彩民争霸app下载| www.4723.biz-乐彩客下载安装| www.571038.com-彩票开奖新闻| www.392234.com-福彩3d魔图定胆图| www.518521.com-中彩堂zzyzc| www.591247.com-竞彩保本打法| www.678125.com-易彩堂怎么注册| www.753028.com-八方体育彩票| www.826727.com-98app彩票网| www.894688.com-彩票中奖号码图| www.963407.com-内蒙古快3预测彩乐| www.713517.com-王者彩票一分快三| www.798531.com-预知百盈快三的软件| www.878152.com-南京市福彩中心电话| www.947174.com-五分快三计划网页版| 彩乐乐www.cll168.com| www.587397.com-篮球竞彩推荐软件| www.687014.com-彩票中大奖的人生| www.762105.com-华人时时彩官网登录| www.831060.com-好彩连连-| www.921445.com-中国福利彩票破解| www.qd0.cc-中福快三开奖规律| www.544557.com-易彩计划-| www.062854.com-三分彩全天计划| www.162270.com-竞彩猫下载-| www.262686.com-吉林市福彩中心地址| www.792891.com-支付宝不能换彩票了| 快彩网www.378017.com| www.1xw.com-彩色笔中性笔| www.80fa.com-福利彩票中奖率高| www.3340.vip-高频时时彩更新| www.8423.vip-m8彩票app-| www.32358.com-快三守号多少期合适| www.66516.cc-宁夏自治区福彩中心| www.gu51.com-彩77下载官网腾牛| www.e20.space-逆袭彩票软件安卓版| www.41ze.com-胜负彩复式表| www.94lj.com-889彩票-| www.2273.vip-bb梯子彩票规则| www.94693.com-河南481乐彩网| www.678613.com-五亿彩官方app| www.968682.com-9彩9彩票-| www.103565.com-体育彩票包括哪些| www.fi58.com-内蒙古福利彩票官网| www.200499.com-快三最大遗漏号码|