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.950974.com-足球胜负彩预测捷报| www.ol1.com-河北快三预测一顶牛| www.j48.net-乐喜彩票有托吗| www.72tb.com-南国彩坛-| www.07mp.com-哪种彩票返奖率最高| www.974.cn-福利彩票店最近位置| www.058179.com-彩报忠心-| www.sg77.com-辉煌彩票正不正规| www.515360.com-怎样购买七星彩票| www.623503.com-乐透乐新彩网| www.703157.com-深圳彩票中心在哪里| www.787331.com-开奖公告新浪彩票网| www.862312.com-百度彩票开奖| www.946682.com-美国快三中奖规律| www.998143.com-福彩pk10下载| www.056.win-千旺彩票网址| www.890711.com-青岛快三平台| 好彩头www.51331d.com| www.tu92.com-华夏彩票带人玩| www.973652.com-七星彩的游戏规则| www.dk14.com-分分时时彩出号口诀| www.2lu.cc-1314彩票-| www.88jc.com-内蒙快三彩票开奖| www.2874.biz-湖南省体彩中心| www.9938.in-彩乐汇平台官方网站| www.441000.com-炫彩字体软件下载| www.550698.com-大小球博彩app| www.641416.com-体彩门面-| www.632595.com-彩票的购买规则教学| www.728286.com-下载彩票网-| www.801178.com-234彩票网络平台| www.874124.com-体育彩票奖励规则| www.939475.com-黑龙江福利彩票官网| www.988169.com-广东体彩官网| www.bx23.com-快三人工计划网页版| www.g33.top-106彩票时时彩| www.54bn.com-凯里福利彩票中心| www.0411.com-易彩彩民登录福地| www.7663.cn-彩票万能挂机软件| www.54224.com-七七彩票怎么玩法| www.2461.vip-正规分分彩平台| www.00067.com-廊坊市彩色印刷包装| www.b80.cc-抚州市体彩中心位置| www.50070.cc-彩神88合法吗| www.017792.com-七乐彩201-| www.28129.cc-168彩票骗局| www.460063.com-河南快三直播开奖| www.560456.com-江苏地方彩票开奖| www.652460.com-500体彩-| www.m31.space-大发时时彩规律技巧| www.47jw.com-彩票短信点播| www.0808.online分分彩刷钱技巧| www.8828.link-足球胜负彩比分直墦| www.465001.com-六开彩开奖规律| www.568517.com-彩票二维码扫描软件| www.649577.com-博彩学校-| www.721036.com-新福彩网-| www.807107.com-体彩纸-| www.874486.com-彩吧图谜3d全图| www.961585.com-各种釉彩大瓷瓶简介| 杏彩www.00840v.com| www.122876.com-优点彩票是骗局吗| www.236982.com-浙江体彩网下载| www.318065.com-福彩是那几天开奖| www.351719.com-乐彩客足球-| www.445448.com-吉林快三快速查询| www.560202.com-kk彩票网合法吗| www.633935.com-7彩便捷酒店的英文| www.713303.com-wz225王者彩票| www.791756.com-彩票中奖流程| www.865908.com-深圳熊猫彩票| www.929716.com-时时彩三星和尾| www.999555.com-彩票推广犯法吗| www.ee20.com-体彩中心快三| www.o95.com-离婚后中彩票| www.241116.com-彩铅画的特点| www.382887.com-胜负彩19006| www.557633.com-福彩≡地三三| www.91cv.com-千禧5分快三技巧| www.mv85.com-彩票助赢软件安卓版| www.807588.com-什么彩票珍贵| www.914957.com-五星竞彩软件正规吗| www.985124.com-玩彩总是输-| www.006360.com-8亿彩平台下载| www.111643.com-彩票代玩怎么赚钱| www.225288.com-福彩打法技巧大全| www.598582.com-七星彩19030期| www.689038.com-彩81下载到手机| www.2724.vip-轩彩娱乐注册| www.928061.com-破解福彩3d妙招| 彩天下www.c1359.com| www.cai4733.com内蒙快三实时走势图| www.fv04.com-快三福彩那些合法| www.7ll.cc-彩票中奖要求平分| www.633189.com-如何买篮球赛彩票| www.8344.com-够为七星彩小辣椒| www.52005.com-吉林快三开奖奖金| www.1737.in-鸿发彩票骗局| www.11579.cc-福彩3d对码选号法| www.59225.cc-5d彩泥-| www.91207.com-好彩一玩法-| www.690112.com-今日足彩唯彩推荐| www.822191.com-全国福彩3d预测| www.951592.com-分分快三红彩网| www.xj83.cc-甘肃体育彩票中心| www.844383.com-福彩大奖在哪里领| www.97568.cc-福建福彩快3遗漏| www.140051.com-彩9彩票官网| www.092235.com-3分彩-| www.884002.com-u9彩票会拉黑人| www.955482.com-全民彩票计划群| CP701www.627793.com| www.xz03.com-福彩3d图迷总汇九| www.152661.com-彩票走首页-| www.798729.com-玩盛世彩票后果| www.395725.com-小鸡彩虹歌曲| www.364006.com-江苏快三百家号| www.71xv.com-体彩世界杯竞猜结果| www.3138.in-500彩票旧版首页| www.203371.com-微信快乐彩可靠吗| www.926844.com-达人彩票不靠谱| 购彩网www.74gcw.com| www.da08.com-彩票争霸2-| www.zl09.com-彩票中奖新闻最近| www.51sl.com-时时彩视频开奖下载| www.585.in-十分彩破解-| www.6518.in-高兴彩票投注平台| www.119096.com-竞彩5oo万-| www.212278.com-鸿运彩票软件破解版| www.45562.com-彩薇花晚霜-| www.019603.com-体育彩票湖南赛车| www.340121.com-足彩4串1缩水技巧| www.988925.com-微彩彩票下载安装| www.w33.com-天吉网福彩3d| www.97si.com-博友彩报警管用不| www.473908.com-极速快三害死人| www.700428.com-佬牛足彩预测推荐| www.765687.com-乐彩杀蓝-| www.842852.com-福利彩票站牌匾| www.904111.com-彩票合买团-| www.982768.com-cc彩票下载-| www.cp0158.com-一分快三助手| www.wa87.com-快三分布图片| www.26hy.com-福彩三的魔鬼图片| www.1194.com-时时彩走势k线分析| www.52679.cc-好彩店官网首页| www.004219.com-即是开彩-| www.980393.com-买彩票致富的人| www.cp0918.com-快三胆拖中奖规则表| www.sk24.com-时时彩apk-| www.5146.com-彩票店加盟条件具备| www.950991.com-查询彩票是否中奖| www.995135.com-福彩主任贪了多少亿| www.tg3.cc-福彩开奖日期是周几| www.ox14.com-福彩3d稳氏理论| www.21aw.com-安徽省福彩中心主任| www.83xo.com-北控国彩和北控京彩| www.144493.com-腾龙时时彩计划下载| www.854453.com-神马福利彩票| www.951427.com-500万彩票网首页| www.999580.com-中国体彩排列五中奖| www.ad21.com-七星彩现场直播今晚| www.20gl.com-彩票19030-| www.vy92.com-人人彩票网合不合法|