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天

知道了
58福彩 www.64640.com-竞彩软件哪个好用| www.300303.com-下载快三走势图表| www.394991.com-网上买篮球彩票软件| www.637882.com-七星彩自动画规| www.984281.com-微信好友做高频彩| www.nt13.com-福彩中心在哪里| www.85yn.com-3d预测老徐说彩| www.8220.xyz-vip网投彩票| www.20800.cc-竞彩误差是什么| www.76568.cc-穷大叔中彩票| www.947216.com-中国彩票造假| www.251593.com-一号彩票登录网站| www.114847.com-富贵彩官网下载| www.155330.com-体育彩票胜负彩规则| www.448332.com-腾凤凰分分彩| www.30269.com-足彩007-| www.178073.com-快三计划软件计划| www.j39.me-湖北福彩中心兑奖处| www.646881.com-彩民打彩票犯法吗| www.862371.com-泰安体彩站点分布图| www.314146.com-大玩家彩票能在京东| www.du69.com-时时彩五星走势图| www.994469.com-福彩3地试机号今天| www.gw95.com-大发快三是什么意思| www.s90.top-梦见中彩票二等奖| www.51mx.com-好彩五分快三| www.208221.com-福彩快三如何玩法| www.40857.com-爱彩导航线路| www.895530.com-彩票那个网站有合买| www.cp7225.com-江苏快三输钱的原因| www.459045.com-五分快三破解器下载| www.002002.com-七乐彩七加一| www.84502.com-彩钢板漆膜标准| www.r34.win-香港快三下什么软件| www.78688.cc-彩3d乐彩3d-| www.097317.com-福彩3的多彩网| www.254319.com-爱乐彩官网-| www.505010.com-竞彩混合过关中奖| www.655676.com-彩票中奖了整蛊短信| www.kr04.com-上海福彩新快3| www.699724.com-彩票5官网-| www.897124.com-久久发彩票网| www.987525.com-彩29彩票com| www.85oy.com-新手看彩票走势| www.cai3910.com彩票一分快三网站| www.489886.com-新江体彩时时彩| www.796495.com-卖彩票需要什么手续| www.119541.com-福彩3d准香港漫画| www.329176.com-青海福利彩票下载| www.30hv.com-正版福利彩票双色球| www.0334.vip-江西福彩大奖兑奖| www.7085.vip-m5彩票一级代理| www.563032.com-9a彩票app安卓| www.681946.com-全中民彩票-| www.792237.com-彩票可叫折过| www.902311.com-北京快三规律破解| www.979582.com-ok彩票app下载| www.7987.org-什么是博彩游戏| www.671112.com-3d家彩网杀码定胆| www.95959.com-怎么去彩票中心上班| www.618880.com-盛兴彩票网登录| www.741020.com-澳门有什么彩票| www.862303.com-彩客彩票手机客户端| www.946584.com-商丘彩礼钱-| 500彩票www.50024b.com| www.28kj.com-五星彩票上期开奖| www.601614.com-易彩快三和值大小| www.694864.com-竞彩今日推荐| www.789793.com-竞彩高手打法| www.870733.com-体彩广西-| www.940303.com-内蒙快三出号规律| www.998110.com-竞彩足球可以买哪些| www.dq16.com-省份快三风险| www.yd55.com-好彩网是骗人的么| www.3567.cc-送38彩金-| www.03930.cc-辽宁福彩发行中心| www.d11.org-体彩江苏7位数彩票| www.817733.com-香港体彩快三| www.60419.com-福利彩票3b解迷| www.437489.com-福彩能在线购买吗| www.995086.com-惠彩骗局揭秘| www.88436.cc-英国彩票官网| www.g50.net-双色球杀号彩经网| www.57fw.com-长沙福彩兑奖地址| www.322523.com-足彩8串1推荐| www.023717.com-即开型彩票中奖技巧| www.110062.com-连中彩票ios| www.233674.com-汇彩网骗局-| www.280008.com-有五分时时彩吗| www.369522.com-旺旺彩票官网登陆| www.00267.com-快三和值跨度对| www.690715.com-足彩推荐在哪| www.53jr.com-红利彩票平台网址| www.7713.com-山东分分彩开奖号码| www.610938.com-百宝彩用户怎么登录| www.388252.com-上海华彩管理咨询| www.515965.com-2元彩票怎么中奖| www.622432.com-新型隔热防腐彩铝板| www.mm4.com-北京体彩排三| www.305436.com-酷彩吧彩票靠谱吗| www.374818.com-246天天妈彩| www.463989.com-香港今日彩票| www.3239.biz-e77乐彩下载| www.081022.com-网投快三靠谱吗| www.733800.com-网络快彩真的假的| www.120524.com-时时彩购买网站| www.8773.pw-彩票预测软件准确吗| www.59488.com-下彩网触屏版首页| www.sb69.com-ee球彩开奖结果| www.962649.com-彩票平台银河| www.636216.com-中彩票税率-| www.710907.com-彩票刷子是怎么赚钱| www.800052.com-福彩大奖什么肖| www.325092.com-彩票吧吧-| www.57571.cc-皇冠体彩安全吗| www.885135.com-神州彩票官网| www.773943.com-天津体育彩票网站| www.190229.com-幸运快三玩法说明| www.309290.com-下载彩68-| www.055921.com-七星彩怎么算中奖图| www.323613.com-七乐彩开奖历史查询| www.508806.com-北京人人中彩票| www.579614.com-彩票app360-| www.668207.com-彩票客服是做什么的| www.761882.com-众赢彩票的骗局官网| www.841690.com-竞彩外围网站| www.926363.com-江西体彩超级大乐透| www.979514.com-黄金叶五彩缤纷香烟| www.an58.com-3d福彩藏机图| www.qc24.com-幸运快三是国家的吗| www.289012.com-关于全民彩票| www.319068.com-河南福彩跑马怎么玩| www.383927.com-九彩洗衣液骗局黑幕| www.53940.cc-体彩大乐透兑奖表| 彩天下www.c5615.com| www.437299.com-陕西彩票中奖的地区| www.367252.com-5588彩票-| www.86oo.com-3d乐彩开奖信息| www.vp10.com-彩票开奖网站| www.582603.com-58彩票三分时时彩| www.847288.com-足彩推荐哪里买好点| www.115302.com-彩铅画动漫人物| www.282962.com-沂风沂俗彩票秘密| www.277666.com-魔方彩票可靠吗| www.27zh.com-中国体彩排列五长条| www.95cl.com-彩狗游戏金手指客服| www.16nq.com-国名彩票-| www.062596.com-吉林快三3号预测| www.976401.com-河南人彩礼-| 众乐彩票www.905844.com| www.lw32.com-时时彩漏洞后一必中| www.539967.com-时时彩快三-| www.560918.com-分析彩票的app| www.994705.cc-苹果怎么下载好彩客| www.232813.com-广东十一选五爱彩乐| www.486767.com-陕西省福利彩票大楼| www.182646.com-彩票赌博犯法吗| www.275259.com-哪个彩票软件最好用| www.77938.cc-福彩3d选-| www.720035.com-七星彩怎么选号呢| www.899777.cc-安徽福彩站怎么申请| www.bang| www.175312.com-湖北福彩快三遗漏| www.274150.com-时时彩宝典老版本|