QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery简洁的tab选项卡切换代码

原创商用 jquery简洁的tab选项卡切换代码

基于jquery.SuperSlide插件制作简洁的选项卡鼠标滑过TAB切换效果,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.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="change-content change-box">
	<div class="change-main">
		<div class="change-cut flex-row">
			<ul class="clearfix">
				<li class="transition tab on">我们的承诺</li>
				<li class="transition tab">我们的实力</li>
				<li class="transition tab" style="border-right:0">我们的角色</li>
			</ul>
		</div>
		<div class="contents clearfix">
			<div class="content flex-row" style="display: block;">
				<a href="#"  target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-009.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">7*24小时售后支持</p>
							<p class="item-p">全国7x24小时客服热线</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-010.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">100倍故障时长赔偿</p>
							<p class="item-p">100倍赔付终端服务时间</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-011.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">15天无理由退款</p>
							<p class="item-p">部分产品可享受15天无理由退款</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-012.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">多对一团队服务</p>
							<p class="item-p">全国80家分公司便捷服务</p>
						</div>
					</div>
				</a>
			</div>
			<div class="content flex-row" style="display: none;">
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-005.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">19年历史</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-006.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">80家分公司</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-007.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">1000名设计师、工程师</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-008.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">120万客户</p>
						</div>
					</div>
				</a>
			</div>
			<div class="content flex-row" style="display: none;">
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-001.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">同行</p>
							<p class="item-p">持续陪伴企业成长,共创,共赢</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-002.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">赋能</p>
							<p class="item-p">帮助企业建立智能经营的能力</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-003.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">连接</p>
							<p class="item-p">为企业连接一切潜在商业价值</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-004.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">开放</p>
							<p class="item-p">面向所有企业和伙伴开放共享</p>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(".change-main").slide({ titCell:".flex-row li", mainCell:".contents",delayTime:0 });
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
爱彩票 www.ya46.com-七星彩彩-| www.427888.com-竞彩足球腰斩后怎么| www.566859.com-中彩华南致富导师| www.131466.com-彩礼风俗-| www.404.site-乐米彩票客服电话| www.904578.com-雅彩彩票官网| www.352621.com-澳门福星彩开奖记录| www.062384.com-彩乐园邀请码| www.183638.com-手机购彩app下载| www.716825.com-出售送彩金彩票平台| www.6969.org-投资时时彩不要当赌| www.80056.com-河北11选5彩票| www.687313.com-彩票可以赚返利吗| www.6692.pw-好堂彩开奖现场| www.884129.com-盛彩app-| www.11639.cc-彩播是啥意思| www.888462.com-乐和彩竞彩app| www.6665.loan-来彩网下载-| www.d04.org-福建体彩开奖直播| www.90798.cc-安装全民足彩彩票| www.337353.com-精彩十分5d直选| www.555505.com-神彩飞扬-| www.17pt.com-七乐彩012路| www.2185.wang-彩票网投站怎么盈利| www.35777.cc-百盈快三百盈时时彩| www.021740.com-三地彩吧第一图库| www.995444.com-福彩37588-| www.lz14.cc-足彩免费推荐app| www.92vw.com-仙游时时彩停了吗| www.177376.com-百盈快三怎么看| www.294007.com-乐彩三地论坛| www.377626.com-彩票店门头照片| www.612713.com-六福彩票app下载| www.626258.com-聚鑫国际彩票| www.53278.com-二四六好彩k308| www.386122.com-奇门彩票预测秘笈| www.668270.com-在英国买彩票中奖了| www.139624.com-公务员能买彩票| www.242356.com-福彩站有快三彩票吗| www.730778.com-和彩国际官方网站| www.pj5.com-哪个彩票平台好| www.2jy.cc-竞彩低赔陷阱| www.81wt.com-思乐彩票机顾客屏| www.2588.site-彩票一等奖高手| www.9136.cc-七乐彩中奖历史| www.74994.com-彩铅画荷叶-| www.308618.com-马来彩计划-| www.462387.com-网易彩票大乐透停售| www.570091.com-3分彩计划-| www.914366.com-福利彩票预测最准确| www.nd52.com-湖北福利彩票3d| www.57665.com-248彩票苹果手机| www.305076.com-体彩第19035| www.205554.com-喜乐彩玩法-| www.wi38.com-爱彩票网首页| www.57699.com-七乐彩中彩网| www.017223.com-易旺彩票io-| www.7990.vip-博彩大小-| www.314001.com-福彩数字3怎么玩| www.447343.com-买足彩稳胜技巧穿法| www.125221.com-新彩吧福彩-| www.522164.com-彩友沙龙玩转双色球| www.42907.com-广东体育彩票十分钟| www.025140.com-彩票几位数-| www.mh75.com-好彩骗局-| www.mj77.cc-湖北快三中奖牛人| www.343278.com-第七感时时彩论坛| www.631236.com-广东好彩一今日开奖| www.946662.com-痴迷彩票拒付款| www.675389.com-鸿鑫彩票是真的假的| www.881503.com-高频彩的概率玩法| www.133.cm-彩虹的约定视频大全| www.616921.com-开彩票店找哪个部门| www.55293.com-时时彩大概率| www.384284.com-福利彩票八个字标语| www.980706.com-利彩平台是干啥的| www.m23.xyz-河北快三套选| www.19275.cc-体育彩票兑奖平台| www.024342.com-百盛彩票注册地址| www.178178.cc-三分快三是什么彩票| www.478379.com-竞彩5800万大奖| www.53776.com-申请竞彩店-| www.399522.com-sk国际彩票-| www.4359.xyz-甘肃体彩七星彩| www.10881.com-苏州体彩7位数| www.714250.com-彩神x是-| www.a08.cn-网络彩票快三骗局| www.635731.com-京彩娱乐-| www.134499.com-北京哪里卖好彩香烟| www.2kl.cc-快三投注合买平台| www.76xc.com-双色球授渔看彩| www.2255.cn-买彩票有多少人中奖| www.8045.cc-水彩画图片简单好看| www.112130.com-福彩快三过滤器| www.cp5034.com-吉林快三技巧顺口溜| www.372643.com-柬埔寨5分钟彩| www.y53.org-彩漫福利-| www.97ez.com-胜彩官方-| www.488448.com-新浪彩票是黑平台吗| www.355332.com-福彩3d老北京字谜| www.281756.com-彩票指南报电子版| www.261075.com-帮我选一注彩票| www.25935.cc-高级彩虹屁范本| www.69742.com-辽宁11选5彩票| www.9qx.com-福d三彩开奖| www.9901.com-众彩网迟丽颖大乐透| www.450747.com-做梦找牛是什么彩码| www.769868.com-彩票系统带app| www.se4.cc-分分快三如何买和值| www.a95.club-3d水彩-| www.79zt.com-竞彩足球任选14| www.555013.com-彩票中5亿-| www.979728.com-福彩网站下载安装| www.jp75.com-五分彩私网-| www.90kj.cc-博彩8888-| www.4781.vip-梦想彩票提现| www.863.website彩铅画女孩卡通| www.586509.com-金沙送38彩金| www.397514.com-体彩迷图总汇| www.496867.com-家彩开奖千禧开机号| www.072025.com-乐透彩3d字谜大全| www.360511.com-今晚福彩3d水果图| www.432755.com-一注福彩多少钱| www.517804.com-宝马集团分分彩| www.569020.com-六开彩走势图| www.655484.com-乐福彩票聊天室| www.aa78.cc-彩票骗局大揭密视频| www.mx75.com-什么是黑彩-| www.062222.com-万彩网快三合法吗| www.771006.com-快三和值概率| www.832380.com-快彩双色球助手| www.886396.com-好运来彩票怎么注册| www.944154.com-甘肃快三倍投计划表| www.980223.com-手机彩票我要买3d| www.pl3.com-新时时彩开奖将结果| www.og05.com-福利彩票官网开奖| www.344888.cc-体彩过完年销售时间| www.3266.top-重庆时时彩官方平台| www.90378.com-77彩票网址-| www.072367.com-秒速快三下载| www.186851.com-彩票分分快三稳赢| www.261387.com-官方彩票九九| www.527457.com-重庆时时彩对码分解| www.850449.com-福彩3d试-| www.941353.com-hk百彩网免费料| www.27su.cc-分分彩五星漏洞贴吧| www.1709.com-一分快三规律怎么看| www.8605.shop-乐盈彩票下载安装| www.342.mobi-入侵黑彩服务器技术| www.759634.com-彩票设赌-| www.856725.com-环球全民时时彩| www.xr88.cc-彩票折叠算损坏吗| www.500384.com-九为尊运用彩票| www.870680.com-如何破解王牌彩票| www.936613.com-中国福彩自助彩票机| www.988794.com-中国彩票有哪些| www.dl31.com-快三怎样看豹子| www.f16.website福彩双色球玩法介绍| www.088705.com-中国福利彩票机选| www.6037.pw-云南省彩票兑奖中心| www.20sr.com-彩票20选8下载| www.3399.in-足彩跟投app排行| www.37391.cc-翼彩宝app-| www.36ue.com-周六足球竞彩赛果|