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.888904.com-易彩堂网页-| 500彩票www.404099.com| www.md61.com-快三大小是多少| www.15ix.com-腾讯75秒彩走势图| www.609.cm-希腊五分彩开奖号码| www.5501.top-七乐彩5拖4多少钱| www.16715.com-福利彩票几种玩法| www.69862.com-福彩怎么看得奖| www.081022.com-网投快三靠谱吗| www.160322.com-快中彩走势图| www.267787.com-今日3d双彩图| www.365458.com-美丽的城市彩铅画| www.475836.com-五行中彩票-| www.566767.com-谁被k8彩票黑过的| www.650720.com-小清新水彩花卉图片| www.780255.com-算彩票神器-| www.866992.com-周六能买啥彩票| www.940504.com-北京快中彩开奖结果| 牛牛网www.nnw6.com| www.ex23.com-爱快3彩票网| www.zj04.com-九号彩票客户端| www.36xu.com-什么软件买彩票可靠| www.2078.pw-南京彩票中奖| www.8303.top-邪恶帝全彩悦老师| www.34502.cc-体彩大乐透软件安装| www.83999.com-福利彩票基本走势图| www.047698.com-500彩票靠谱么| www.183563.com-上海快三开奖直播| www.262231.com-手机买彩票软件大全| www.366775.com-兰州市福彩中心主任| www.470580.com-在国外怎么买足彩| www.561872.com-三十六选七体彩福建| www.638650.com-彩票818手机下载| www.760397.com-pk彩票平台怎么样| www.858425.com-三彩丽雪官方旗舰店| www.921173.com-神彩彩票是不是骗局| www.976324.com-彩票未领-| www.za14.com-红牛彩票怎么看大小| www.32jt.com-彩彻区明彩古今异义| www.944.live-澳门5分彩是真的吗| www.5676.vip-龙胜彩票平台| www.13857.com-竞彩资讯专家| www.61623.cc-七星彩诲口彩票网| www.063283.com-彩票店可以兼营什么| www.154679.com-足彩任选9概率选法| www.248594.com-福彩出什么-| www.327342.com-福彩七乐彩专家预测| www.406234.com-描写彩虹的唯美句子| www.518638.com-手机发彩网网址| www.593311.com-彩虹7游戏-| www.670089.com-买哪种彩票最靠谱| www.753918.com-中国福彩极速快3| www.904631.com-福州体彩中心在哪里| www.972216.com-印尼时时彩官网| www.hf3.com-快三屠龙和跟龙| www.qk07.com-好彩蓝莓爆珠多少钱| www.09as.com-豪客彩首页-| www.80te.com-国丰彩票官网| www.2035.pro-好彩堂全年资料大全| www.8119.in-澳门合法彩票平台| www.31495.com-网络彩票代理返点率| www.77447.cc-今日体彩排列五字谜| www.029802.com-福彩软件-| www.110099.com-下载彩乐透-| www.181224.com-易彩快3一分钟一期| www.259145.cc-什么软件可以买竞彩| www.335707.com-双阳黑彩小哈| www.421727.com-机选福彩六加一| www.525659.com-巴南区体彩中奖| www.717460.com-兰花图片简笔画彩铅| www.796754.com-在淘宝买彩票怎么买| www.873690.com-c02彩票平台| www.971504.com-手机购买彩票合法吗| www.cp696.com-青海快三平台| www.mk85.com-快乐彩介绍-| www.s72.club-什么软件买彩票靠谱| www.50rj.com-足彩14场进球预测| www.977.tv-时时彩一分彩走势图| www.9307.com-福州体彩音乐聊天室| www.51597.cc-宁波快三彩票| www.96117.com-彩票归谁管-| www.060774.com-北正街附近体彩店| www.165440.com-彩6季票在那买| www.253532.com-好彩网妹子骗局| www.324433.com-七乐彩杀号图谜| www.391717.com-uu直播购彩-| www.538637.com-福彩网赚钱是真的吗| www.624112.com-彩票计划提醒软件| www.421.biz-塘沽的快三秒| www.185828.com-分分时时彩计算公式| www.789624.com-福彩山西快乐十分钟| www.20220.com-彩神通金码关注码| www.63887.cc-十四场胜负彩星号| www.031007.com-凤凰彩票是合法的吗| www.106819.com-七号彩票-| www.172329.com-安微快三遗漏走势图| www.277632.com-一定牛彩票开奖直播| www.372058.com-诚信快捷体彩实体店| www.jp0.com-时时彩胆拖组六胆拖| www.ot79.com-360彩票走势| www.44yf.com-足球竞彩专家预测| www.540.cn-浙江福彩中心官网| www.4096.me-清乾隆釉彩大瓶| www.9308.org-中国彩票有哪几种| www.65532.com-炫彩界面库教程| www.021841.com-官网竞彩258下载| www.089808.com-中国体彩票app| www.149855.com-038彩票平台苹果| www.254269.com-中彩网官网首页| www.322319.com-128彩票平台| www.387676.com-网赌时时彩违法| www.549623.com-在线购买足彩| www.618561.com-中国体育彩票终端机| www.676350.com-福彩3d小军第三| www.751492.com-中国足球彩票竞彩| www.816770.com-吉林快三黑彩合法么| www.884575.com-快三技巧大小单双句| 688彩票www.688dl.com| www.cb71.com-快三跟计划能赚钱吗| www.sn48.com-时时彩漏洞破解| www.16ys.cc-总幻想彩票中大奖| www.94gq.com-体彩排列三和值字谜| www.2554.cm-快三倍投追号计划表| www.7766.top-彩九直播-| www.22115.com-国内足彩狙击团队| www.64450.com-篮球竞彩分析app| www.060078.com-东方3分彩开奖号码| www.133743.com-500mvp彩票-| www.201746.com-利彩助手-| www.266224.com-快三组合表-| www.365640.com-彩铅简笔画卡通人物| www.445771.com-篮球竞彩网站| www.528700.com-阳光彩虹小白马图片| www.627654.com-分分彩九码必中公式| www.691173.com-竞彩老吴微博| www.760735.com-福利彩票会员预测网| www.862086.com-彩票开奖软件原理| www.920653.com-福建时时彩快3规则| www.974539.com-掌优彩票安全吗| www.at22.com-广东福彩快3怎么玩| www.qo49.com-北京福彩网快3| www.6eo.com-体彩大乐透的宣传语| www.54tk.cc-江西福彩银行| www.578.in-福彩中心3d下载| www.3689.net-佳能彩色复印机价格| www.8554.wang-奖聊彩票苹果版| www.60866.cc-全国最大彩票论坛| www.013193.com-海南体彩论坛4十1| www.073900.com-体彩大透乐杀号定胆| www.131389.com-郑州市彩礼一般多少| www.198034.com-打快三一注多少钱| www.258230.com-足彩反买-| www.319201.com-海南七星彩天涯社区| www.377903.com-在线买彩票机| www.552496.com-彩名堂计划是假的吧| www.625516.com-五百彩票购彩大厅| www.684422.com-诚博购彩注册| www.751911.com-扬州彩票-| www.849001.com-时时彩提醒软件| www.902596.com-36o彩票全国开奖| www.958902.com-3030彩票-| 购彩网www.913gc.com| www.zl0.com-福彩五等奖多少钱| www.og59.com-彩票598-|