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.0534.xyz-快三模拟投注器| www.20322.com-竞彩足球比赛直播| www.83497.com-中彩票技巧-| www.134133.com-广州哪里有好彩烟卖| www.806865.com-竞彩理财投资计划表| www.884848.com-唐龙说彩是真的吗| www.957939.com-彩票摇球-| 天天彩票www.7782w.com| www.400836.com-七星彩走势图和值| www.514833.com-彩妆护肤店加盟| www.586039.com-阳谷西湖彩票中奖| www.659504.com-全民足彩彩票靠谱吗| www.726350.com-彩虹平台-| www.797980.com-彩票源码演示| www.081919.com-在线彩票计算器| www.182888.com-一分快三网站下载| www.257144.com-中快3彩票app| www.323917.com-新加坡福利彩票开奖| www.389298.com-170彩票杨哥说彩| www.490553.com-乐彩vip平台黑彩| www.565365.com-时时彩代打是真的吗| www.627683.com-腾讯分分彩五码一期| www.690233.com-足彩310走势图| www.769312.com-好彩客在哪下载| www.186800.com-中彩网app下载| www.181619.com-安徽快三推荐号今天| www.280033.com-福彩15选五-| www.364364.com-彩虹什么意思同性恋| www.448855.com-双色球彩票机选| www.527852.com-福彩3d奖号多少| www.585125.com-美国代购彩票| www.004160.com-足彩大赢家过| www.652689.com-今晚双色彩球开奖号| www.821149.com-民政部福利彩票中心| www.37pe.com-七星彩专家智能杀号| www.3136.pw-北京体彩排三试机号| www.11382.cc-788彩钢板板型| www.95955.com-福彩知识考试题| www.082838.com-大奖网买彩票可靠吗| www.181853.com-官方手机购彩app| www.273458.com-竞猜彩-| www.381558.com-七星彩号码历史记录| www.96zy.com-响排和彩排-| www.zq4.com-彩迷张专家专栏| www.uy44.com-北京快三网官网| www.11kl.com-网上购彩软件那个好| www.63qy.com-彩票开源-| www.926.tv-临沂体彩中心| www.4184.cn-七彩阳光第七届| www.8698.pw-彩票开奖开奖助手| www.39651.cc-天天中彩票游戏| www.77333.cc-彩生财彩票-| www.019539.com-云南体彩中心在哪里| www.6015.vip-众益竞彩彩票app| www.484176.com-大师彩票怎么能中奖| www.621422.com-甘肃快三电脑版| www.773231.com-陌陌彩票-| www.892539.com-懂彩帝ios-| 凤凰彩票www.77803r.com| www.7kw.com-送彩票什么含义| www.0035.net-彩票四位数字是什么| www.60613.com-福利彩票30选7| www.074110.com-宏发快三有什么规律| www.271359.com-好彩1走势图福彩网| www.490803.com-支付宝没法买彩票了| www.646739.com-彩民之家036| www.917658.com-彩吧开机号近10期| www.cp3800.com-一分快三计划群| www.17ek.com-网上竞彩足球在哪买| www.2913.biz-体彩星级怎么评定| www.36565.cc-澳门彩票网-| www.035014.com-高赔彩-| www.576410.com-彩霸王综合资料| www.ed20.com-百姓彩票快3| www.13pe.com-福彩3d路数-| www.0951.name-苏州竞彩店分布| www.06746.com-彩票3d图纸-| www.99317.com-智胜彩票网-| www.107339.com-500彩票开挂软件| www.233802.com-爱乐彩中奖助手下载| www.397467.com-m8彩票登录-| www.626622.com-江苏快三跟着老师买| www.98se.com-600彩票骗人| www.8893.cn-竞彩8串1中奖率| www.028523.com-乐彩网开奖信息| www.170355.com-河南省快三开奖结果| www.304698.com-吉林快三图表| www.463623.com-甘肃快三统计表| www.611118.cc-一分快三倍投方案| www.329721.com-山西省体彩兑奖地址| www.607136.com-福利彩票史上最大奖| www.765124.com-快彩票下载-| www.925575.com-金彩网是真的吗| 亿万彩票www.905881.com| www.b19.me-彩票开奖规则| www.0898.net-华夏彩票怎么玩| www.22626.com-齐鲁福利彩票中奖号| www.015056.com-海南彩票说的对数| www.148434.com-乐优炫彩百度百科| www.599762.com-体彩篮球投注| www.127070.com-彩铅画人物教程图解| www.312162.com-福利彩票三d中将号| www.539834.com-麒麟彩票-| www.42hj.com-凤vip彩票下载| www.084479.com-鑫源彩彩票网地址| www.959350.com-彩名堂app安卓版| 乐发彩票www.cp3136.com| www.950412.com-乐彩客彩票安卓版| www.xc49.com-亚洲彩票成立多久了| www.556.live-时时彩怎样算豹子| www.9978.cc-福彩3d坑-| www.85421.com-福利彩票分析| www.133663.com-福彩3d彩图第一版| www.287355.com-彩票api接口大全| www.465678.com-财政部批准网络购彩| www.380128.com-彩鸾归令的意思| www.702609.com-高频彩兼职是真的吗| www.952541.com-2四六天天好彩| www.ln42.com-旺旺彩票app| www.35vh.com-七星彩十大家杀号| www.27714.com-绘画图片大全彩铅| www.756425.com-58彩票网有托吗| www.gm0.com-时时彩出号绝密公式| www.59551.com-排列五奇偶走势图彩| www.481118.com-和彩印语录-| www.64366.cc-广东竞彩app| www.15231.cc-彩吧论址首页| www.099277.com-五福彩票app苹果| www.341774.com-盈易福彩下载安装| www.5119.in-国外大奖中奖彩票图| www.137878.com-南充体彩兑奖处| www.306696.com-彩票机选能中奖么| www.493465.com-倍投彩票能赚钱吗| www.pd2.cc-彩票每期都买| www.13ui.com-体彩任选6中奖规则| www.cv47.com-时时彩注册送188| www.85zn.com-梦见彩票的8个数字| www.c39.cm-昨天体彩开奖| www.550312.com-华夏彩票苹果系统| www.93277.cc-五百万竞彩比分| www.081517.com-网络福利彩票合法吗| www.377871.com-附近有体育彩票店| www.990005.com-彩漂和漂白水区别| www.237583.com-体育足彩竞彩网开奖| www.h47.biz-澳洲五分彩走势图| www.2477.vip-彩票网首页| www.120278.com-腾讯中国彩合法不| www.191143.com-体育彩票快三玩法| www.98333.com-qq分分彩计划| www.119573.com-51彩票软件-| www.443950.com-意彩下载苹果| www.321950.com-彩票预测软件有用吗| www.118941.com-钻石彩票网合法吗| www.996181.com-约彩彩票骗局揭秘| www.tr61.com-彩票合买app| www.2926.pw-鸿鑫网上彩票骗局| www.53473.com-口袋彩票-| www.877785.com-做私彩挣钱吗| www.ev40.com-福彩快三过年停几天| www.141070.com-九九彩票骗局| www.632873.com-众乐彩网-| www.952601.com-k彩登陆线路测速| www.829644.com-签到送彩金彩票平台| www.299231.com-爱彩票官网-|