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天

知道了
亚洲28 www.84lw.com-多彩网是不是骗局吗| www.511114.com-遇到彩虹是那首歌| www.078057.com-旺旺彩票能玩吗| www.070008.com-足球彩票中奖图片| www.728378.com-体彩网官网-| www.696781.com-三十六选七彩票| www.841653.com-谁有打时时彩的群| www.975865.com-驻马店彩礼嫁妆| www.mx52.com-天天福彩下载| www.912234.com-宁海体彩店app| www.510121.com-兴安盟体彩中心| www.660040.com-256彩票安卓| www.828287.com-春天彩票平台| www.961128.com-福彩15选5骗局| www.hn04.com-时时乐彩票-| www.02sp.com-微博彩票不能提现| www.589.tv-在线时时彩后三做号| www.8896.org-大乐逶杀号彩乐乐| www.99443.cc-2019体彩七位数| www.472288.com-彩乐园计划平台| www.635543.com-国外博彩怎样拉客户| www.742211.com-四川体育彩票官方| www.883476.com-彩票送彩金的网址| www.996409.com-佬牛竞彩-| www.pb41.com-多票票彩-| www.17qb.com-网易彩票不再更新| www.866.live-体彩5d的开奖号码| www.7778.org-兼职代买快三| www.062586.com-优信彩票平台可靠吗| www.240852.com-彩神争覇-| www.383085.com-中国体育彩票竞| www.564001.com-多彩贵州风门票团购| www.639452.com-体彩旗舰店要求| www.718362.com-在线看彩票-| www.gq33.com-彩色包装纸箱设备| www.771133.com-旋风彩虹机报价| www.891729.com-今日彩票软件下载| www.968408.com-欢乐时时彩开奖结果| www.263692.com-足球竞彩软件| www.373654.com-绿好彩是薄荷烟吗| www.513391.com-快三外围玩法| www.601846.com-临泽彩票中奖者| www.832902.com-买彩票机选容易中| www.950497.com-彩赢彩票app| www.59lj.com-买彩票每日有限额吗| www.00685.com-中国体育彩票申请书| www.726577.com-手机好买彩票吗| www.851512.com-快三大小研究| www.722813.com-浙江福彩领奖| www.855439.com-疯狂赛车彩票| www.d24.bid-www.皇都彩票| www.585.date-足彩竞彩比分500| www.750155.com-手机在线购彩平台| www.178572.com-500彩票-| www.869.cn-辉柏嘉水溶彩铅| www.571578.com-大玩家彩票京东兑换| www.596579.com-福利彩票快餐| www.710686.com-七乐彩选号器| www.815423.com-假彩票平台-| www.957083.com-彩票平台余额修改| www.oq92.com-乐优彩票-| www.39pj.com-彩票历史中奖| www.vv29.com-关于彩票的知识| www.563235.com-私彩跟官方彩票对冲| www.857734.com-盈彩娱乐app下载| www.371525.com-兰花彩铅画图片大全| www.515428.com-网上买七星彩| www.677040.com-体彩刮刮乐有假的吗| www.884088.com-体彩走势乐彩网| www.974946.com-棒棒彩票app下载| www.63137.com-2019年彩礼标语| www.059818.com-福利彩票3d如何玩| www.163689.com-通博彩票网登录| www.248555.com-福彩吧-| www.332605.com-福利彩8app下载| 财神网www.29277x.com| www.8785.biz-小炮七星彩开奖| www.116374.com-彩票分析数据用途| www.267559.com-彩票中奖后投注倍数| www.407688.com-香港福利基金彩地址| www.89581.com-新利快乐彩手机版| www.088921.com-彩吧图谜汇总| www.95615.com-彩票实体的前景| www.666325.com-最新阳光探码彩民乐| www.954756.com-如何选择彩票号码| www.47il.com-风之彩唐老大制度| www.724343.com-佛法看待彩票| www.929.net-体彩大奖排行榜| www.27143.com-彩票2元3d走势图| www.09537.com-买福利彩票用手机| www.he36.com-大发快三免费破解器| www.x53.cc-乐彩app可靠吗| www.278919.com-体育彩票群-| www.566527.com-和彩放题菜单| www.635153.com-银川七彩-| www.692152.com-双色走势图彩乐乐| www.763777.com-商丘足彩高手哥| www.822101.com-玩彩票到底有多害人| www.889369.com-七乐彩今天出什么| www.954899.com-中国足球竞彩比分| 5号彩www.595hc.com| www.cl43.com-体育彩西彩票予测| www.629763.com-时时彩后二杀码| www.692983.com-体彩销售网点查询| www.765959.com-登陆全民彩票官网| www.yy7.com-福利彩票复式玩法| www.63as.com-禁止网上销售彩票| www.5566.space-马来分分彩是真的吗| www.30077.cc-体彩站点编号查地址| www.535264.com-那种彩票是8位数字| www.727336.com-网上的彩票站违法吗| www.fs97.com-宝马彩票投注app| www.049818.com-牛彩论坛首页官网| www.4168.cm-彩虹六号冰河皮肤| www.505725.com-职业足彩玩家| www.269500.com-中国官彩-| www.140071.com-彩66下载-| www.551092.com-福彩双色球怎样合买| www.809435.com-头彩网站是假的吗| www.922663.com-下人人中彩票| 500彩票www.50788p.com| www.845234.com-福彩会上基诺吗| www.892382.com-网上购买竞彩足球| www.773718.com-时时彩胆码技巧公式| www.664727.com-贵阳多彩贵州街图片| www.61kw.com-三五彩票怎么下| www.13356.cc-足彩四串一全包技巧| www.055093.com-日本全彩色系漫画| www.331865.com-江苏快三两同号推荐| www.644113.com-杭州时时彩开彩结果| www.751540.com-中彩吧有多少年了| www.71eb.com-时时彩斗牛规则| www.1151.pw-热门彩-| www.6227.shop-查询昆明快三| www.60020.com-福利彩票购买| www.026801.com-彩票工资车哪里有| www.726555.com-手机在线还能购彩吗| www.816366.com-北京体彩客服| www.899895.com-彩票下app-| www.964116.com-福彩3d中奖票面| 118彩票www.62118e.com| www.jm91.com-分分彩坑人-| www.879583.com-网络彩票能小赚钱吗| www.953047.com-九州彩票登录网址| www.999875.com-体彩排列三兑奖规则| www.zx2.cc-体彩6+1走势图| www.tb03.com-乐盈彩票不能提现| www.083932.com-智博彩票是真的假的| www.7195.net-足彩北单胜平负| www.113013.com-竞彩猫微博-| www.bw12.com-网上投注快三违法吗| www.830256.com-福彩北京基本走势图| www.566423.com-彩票微投资是真的吗| www.504167.com-彩排和踩台的区别| www.134829.com-欧盟好彩双爆价格| www.855143.com-釉彩成分-| www.140603.com-上海福彩网4d| www.292879.com-易彩app在线下载| www.881897.com-百度彩票走势图表| www.966870.com-快三倍投计划表| 幸运彩票www.862366.com| www.q10.hk-我是赌广西快三的| www.8147.loan-7125彩票-| www.129716.com-南京体彩-|