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天

知道了
亚洲28 www.ip25.com-竞彩500万-| www.719552.com-吉林时时彩走势图| www.119413.com-中国全民快三| www.1961.date-7070彩票可靠吗| www.320083.com-体彩何时开奖| www.4180.cc-北京七彩集团董事长| www.66475.com-彩票11选五内蒙古| www.057686.com-澳门生肖彩网址| www.144669.com-唯彩看球完整版| www.564.in-腾讯分分彩龙虎口诀| www.8313.cm-江西省体彩-| www.765287.com-福彩双色球查询| www.2386.biz-天天赢彩票官网客服| www.267361.com-五百万彩票网网页版| www.78318.com-彩票站有新人红包的| www.86sq.com-必发彩票网下载| www.295693.com-内蒙古福彩领奖地址| www.374747.com-中国体育彩票52期| www.lx63.com-竞彩足球预测软件| www.j79.cc-118彩票安卓版| www.92uk.com-香港快三开奖查询| www.088145.com-中超足彩在哪买| www.993308.com-足球博彩入门知识| www.367318.com-福彩怎么算毒胆| www.506181.com-专家体彩七位数预测| www.2335.top-好彩二公式-| www.320044.com-360彩票电脑版| www.431601.com-3d家彩网开奖查询| www.550542.com-大乐斗彩票中奖说明| www.657194.com-竞彩网点分布| www.785440.com-m5彩票-| www.863550.com-彩票有没有防伪标志| www.929325.com-公彩开奖结果| www.983628.com-买足球竞彩网| www.ir8.cc-内蒙古赤峰快三开奖| www.uh53.com-网上的彩票是真的| www.11rj.cc-中国足彩馆鸽宝原创| www.69nm.com-网上怎么打彩票| www.11855.cc-辽宁体彩网一选五| 9号彩票www.80767g.com| www.1770.cc-皇轩彩票登录| www.354411.com-体彩排五排五预测| www.581129.com-33彩票安卓版下载| www.693907.com-中体彩官网app| www.614117.com-二分时时彩中奖技巧| www.691578.com-15选5下载彩乐乐| www.773719.com-聚财彩票app下载| www.860454.com-湖北快三追号计划| www.949107.com-五福彩平台-| 惠民彩票www.hm7288.com| www.24ga.com-地球人彩票安卓版| www.068717.com-湖北快三彩票下载| www.283108.com-华乐彩票开奖中心| www.361927.com-形容彩虹的优美句子| www.273667.com-173时时彩平台| www.394040.com-设计色彩头像| www.566688.com-彩神通软件怎么样| www.9883.loan-民政部部长彩票| www.782515.com-彩51官网是真的吗| www.ic10.com-银川福彩转让| www.679867.com-至尊彩霸-| www.302568.com-澳门幸运彩-| www.411582.com-下载彩视最新版本| www.664110.com-中国福彩电脑版首页| www.778563.com-安彩高科国企改革| www.927108.com-红旗彩票是真的吗| www.806727.com-彩票注销是什么意思| www.917661.com-嬴彩网-| www.03wp.com-v8彩票app官网| www.2372.pw-七彩应用商店苹果版| www.39682.cc-爱彩彩票邀请码| www.026841.com-yy刷彩金兼职平台| www.120904.com-彩票双色球最近几期| www.533231.com-外国数学家破解彩票| www.657459.com-乐彩网彩摘论坛| www.830566.com-印象彩票手机登录| www.66973.com-异地买彩票怎么兑奖| www.393390.com-昨天的体彩中奖号码| www.71588.cc-福彩快三统计| www.973207.com-彩虹正版app| www.212549.com-私彩平台能玩不| www.299627.com-彩票二元-| www.460903.com-在哪能买福利彩票| www.551775.com-周一彩票-| www.8022.com-小班健康彩虹伞教案| www.109393.com-杏彩平台-| www.377139.com-因为彩礼钱分手微信| www.760312.com-彩客网310胜负彩| www.337.tv-彩票守号推荐号码| www.138689.com-全天时时彩计划网页| www.763513.com-江苏快三改革| www.47062.com-时时彩一期计划全天| www.69987.cc-盛世彩票登录网站| www.cr93.cc-大发优彩网-| www.1270.wang-福建体育彩票网站| www.30892.com-体彩专家预测推存| www.004238.com-博彩系统租用| www.628956.com-诚信彩app下载| www.375882.com-七星彩排列图| www.797311.com-500彩票足球| www.91842.com-双色球好彩玩法| www.126423.com-创彩网真实可靠吗| www.308172.com-淘宝还可以买彩票吗| www.687054.com-体彩官网app下载| www.988338.com-福彩三d技巧大全| www.m13.cc-彩票热冷号分析| www.862955.com-礼拜五什么彩票开奖| www.130497.com-一分快三刷流水套路| www.001002.cc-竞彩篮球买客队胜负| www.15cr.com-男方分手要彩礼钱吗| www.898.hk-网上买彩票怎么报案| www.6753.xyz-官网幸运彩票app| www.63823.cc-竞彩最新资讯| www.65jo.com-体育彩票481| www.xx9.com-彩神大发快三入口| www.d79.top-七天彩票在线投注| www.64hk.com-迷彩战士是哪种动物| www.127691.com-彩虹搭建-| www.558520.com-彩铅画作品图片| www.624.date-网赌时时彩输| www.57hi.com-体彩今年何时开奖| www.11uf.com-牛彩赚钱真的假的| www.7283.top-幼儿体能儿歌彩虹岛| www.524712.com-大数据彩票能赚钱吗| www.509242.com-宝利彩票网怎么样| www.692965.com-彩票电话投注| www.062257.com-第一彩26234| www.83318.cc-易中彩票平台| www.200745.com-福利彩票啥时间开奖| www.256773.com-中彩吧彩票网站| www.54xf.com-好运彩票免费注册| www.761477.com-体育彩票规律讲课| www.880988.cc-黑客能把黑彩给黑吗| www.962574.com-旺旺彩票二维码| 吉利彩票www.66376m.com| www.252670.com-老时时彩开奖数据| www.8916.xyz-易彩网是做什么的| www.239151.com-火箭彩票vip分身| www.422574.com-附近体彩销售网点| www.558606.com-电脑版彩客网| www.639202.com-苏州开彩票店流程| www.734002.com-海南竞彩快三| www.831170.com-2019实体彩票站| www.917988.com-彩虹图片简笔画彩色| www.986185.com-体彩排列五走势新浪| www.ua2.cc-彩票306软件| www.183056.com-安徽福利快三一定牛| www.6596.biz-体彩nba在哪买| www.83500.cc-阳光彩票登录入口| www.554415.com-买的彩票怎么查| www.219293.com-体彩刮刮乐大7| www.788677.com-中国足彩网法乙| www.534179.com-三彩彩票官网网址| www.xu38.com-也买彩是正规彩票吗| www.972945.com-178彩票论坛| www.r23.cc-惠泽了优彩社区| www.28991.com-人人彩票怎么进不了| www.176013.com-福彩快3走势图甘肃| www.501379.com-乐八8彩票时时彩| www.170709.com-河南快三遗漏数据| www.322155.com-福彩快3注册邀请码| www.169611.com-甘肃快三开奖走势图| www.1616.live-彩41app-| www.8458.in-双色球彩之网互动区|