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.836844.com-湖北省福彩网| www.5006.me-彩21彩票-| www.kp61.com-彩票分析基础| www.40wf.com-彩票几点能买当天的| www.70960.com-彩票白菜分享| www.144361.com-幽默的彩票广告语| www.312380.com-福彩一定牛下载| www.04878.com-福彩3d图纸第二版| www.085337.com-中国福彩网手机投注| www.315690.com-重庆实时彩选号软件| www.893888.cc-金牛彩票app| www.54881.com-彩博888资料网站| www.796595.cc-众博彩票99-| www.610315.com-成都彩钢板厂家| www.873956.com-山西福彩网官方首页| www.909038.com-澳门六会彩开奖日期| www.6501.vip-七乐彩三胆专家预测| www.023927.com-怎么买美国彩票| 500彩票www.50080b.com| www.653965.com-彩票对投赚彩金| www.701242.com-彩票的彩什么意思| www.486583.com-今日竞彩单关图片| www.482806.com-本斯彩票中奖号码| www.598899.com-天天购彩票靠谱吗| www.928400.com-鸿彩彩票是真的吗| www.7908.cm-北单500彩-| www.208851.com-彩票跟长龙-| www.9gk.com-体彩中六个数多少钱| www.92pt.com-分分彩网投-| www.17533.com-足球彩票收藏| www.89915.cc-彩票店网上怎么接单| www.183661.com-河南快三下载| www.306595.com-盈盈彩app-| www.422180.com-新浪爱彩手机平台| www.98im.com-职业黑彩玩家| www.691309.com-熊猫彩票网址是什么| www.989949.com-彩漂泡一晚上没事吧| www.481501.com-体彩数字购买规则| www.610539.com-彩票软件网站好不好| www.077880.com-福彩网可靠吗| www.198333.com-蚂蚁彩票中了一等奖| www.320501.com-老彩票-| www.420862.com-体彩店怎么装修好看| www.630011.com-福彩3d新玩法介绍| www.716586.com-水彩画入门简单画| www.808922.com-柬埔寨五分彩官网| www.923069.com-手机108彩票软件| www.fu75.com-快三怎么看遗漏| www.893933.com-福彩3d中奖扣税吗| www.73kv.com-三分彩怎么看走势图| www.530016.com-台湾时时彩开奖走势| www.69nx.com-新未来彩票-| www.2723.wang-福彩3d天宇系列图| www.9670.cn-福彩三地彩乐园| www.52499.cc-伯爵彩票网是真的吗| www.013193.com-海南体彩论坛4十1| www.0724.cm-澳客口袋彩店| www.233468.com-众彩网专家汇总| www.790176.com-炫彩是什么-| www.cai0303.com安徽福利彩票快三| 博通彩票www.907994.com| www.60mj.com-篮彩足彩-| www.181608.com-湖北快三预测图| www.586088.com-18彩票网正规| www.91487.com-绿好彩是爆珠烟吗| www.85969.cc-彩涂粙-| www.62xs.cc-彩票所有投注平台| www.9070.loan-头彩网手机版| www.cp6770.com-下载快三技巧| www.2336.org-时时彩中奖号| www.tc47.com-江西福彩中心地址| www.83057.com-彩票翻倍几倍翻| www.73yx.com-福彩3d试机号金胆| www.8746.vip-快购彩票软件下载| www.72219.cc-鼎盛彩票-| www.135347.cc-360彩票购彩票| www.706460.com-吉林快三查询表| www.282205.com-时时彩个位杀号宝典| www.cn81.com-天天彩選4-| www.84ax.com-天下彩富网-| www.558963.com-彩虹的约定原唱| www.635209.com-购买重庆时时彩平台| www.735727.com-体育彩票破解版| www.803445.com-海南福彩快2网站| www.874055.com-体彩假还是福彩假| www.948722.com-鑫彩网彩票客户端| www.996042.com-足彩竞彩北单统计| www.ad28.com-体彩任选3-| www.173029.com-快三平台下载安装| www.279603.com-下载分分彩官方网站| www.439266.com-每天一彩的专栏| www.550768.com-华夏彩票快3| www.650024.com-365博彩-| www.740188.com-体彩和福彩买哪个好| www.823277.com-长兴附近福彩店| www.910579.com-乐彩app哪里下载| www.974453.com-福彩最新开奖| 盈彩www.890751.com| www.qo00.com-广西快三输了怎么办| www.1394.in-福利彩票真能中奖吗| www.21861.cc-集彩彩票-| www.750478.com-黑龙江福彩开奖| www.837844.com-博牛彩票用了多久了| www.912450.com-苏宁彩票快三| www.jr3.cc-体彩481技巧| www.52966.com-智能彩票摇号器下载| www.kq98.com-七星彩中奖概率| www.56501.com-河北福彩助学| www.761435.com-彩票中五百万的概率| www.893822.com-彩63彩票-| www.cp4366.com-快三什么叫三军玩法| www.3015.website彩吧资讯-| www.34187.com-保定彩票机怎么申领| www.542536.com-国正彩票-| www.645353.com-青岛彩票网站| www.81008.com-福利彩票在线投注卡| www.253056.com-好彩票app2-| www.376707.com-彩票有没有开过重号| www.540680.com-520裕兴彩票网站| www.875145.com-最真实的中彩票故事| www.8951.xyz-买篮彩大小分技巧| www.3825.com-排3跨度中彩网| www.202202.com-彩票中奖查询器| www.353884.com-彩票直播间3d教父| www.0214.online多多彩彩票是骗局吗| www.53563.cc-彩虹6号好玩吗| www.565619.com-彩票两元网手机版| www.799579.com-舟山福彩快二| www.898247.com-广西体彩app| www.96sz.com-表演节目彩排的说说| www.7799.live-免费领取彩金的网站| www.511456.com-彩虹两个字别称| www.651406.com-体彩兑奖期多久| www.697069.com-福彩字谜图谜总汇九| www.867129.com-一彩票图谜-| 500彩票www.50054g.com| www.wd20.com-冀彩宝还能用吗| www.257628.com-凤凰彩票-| www.877934.com-小鹿彩票下载| 易盈彩票www.7793n.com| www.r10.xyz-香港快三骗局| www.366660.com-彩铅基础理论知识| www.428576.com-足彩收米表情包| www.039320.com-体彩网提现-| www.916086.com-开个体彩店赚钱吗| 幸运彩票www.5095s.com| www.6055.shop-体彩过户很麻烦吗| www.57331.cc-台湾福彩总站| www.108967.com-七彩神仙论坛| www.cp577.cc-快三破解器下载| www.16ra.com-宝马彩线路导航| www.tn8.cc-快三时时彩票| www.219616.com-广西快三组合| 财神网www.29277n.com| www.ta13.com-十二生肖彩票叫什么| www.136824.com-99彩票登录网址| www.756095.com-旺彩计划软件| www.891772.com-彩票龙是什么意思| www.gj42.com-福利彩票一分钟一期| www.329422.com-深圳体育彩票网首页| 博乐彩票www.35918v.com| www.917234.com-大奖网能买彩票吗| 金掌柜www.83993q.com| www.328.tv-色彩三原理-|