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.294610.com-彩票源码3端| www.77760.com-北京快三开奖网址| www.628434.com-彩神vip软件| www.800176.com-中国禧利彩票| www.897385.com-体彩竞猜怎么玩| www.982245.com-贵州省福利彩票中奖| www.cb04.com-彩6-| www.xx64.com-668彩票网址| www.07pn.com-彩票码的资料| www.281.cn-中国彩妆十大排行榜| www.3336.hk-078彩票软件下载| www.05813.com-海南体彩下载app| www.323767.com-七乐彩在线机选号码| www.b09.org-彩票开奖查询今天| www.169808.com-甘肃快三预测| www.977436.com-河南要彩礼-| www.37552.cc-中彩网擂台赛图表| www.669115.com-海南七星彩技巧大全| www.839914.com-浙江省体彩中心主任| www.446668.cc-彩票x技术-| www.656796.com-山东体彩论坛排3| www.754057.com-免费送彩金网址| www.880044.com-彩票时间修改通告| www.051283.com-彩票合买哪个app| www.zq61.com-幸运彩客户端| www.x69.com-大唐时时彩app| www.716619.com-彩铅画动物毛发排线| www.vi90.com-内蒙古快三看样结果| www.991667.com-安徽福彩快3官网| www.fj49.com-福彩3d和值谜| www.o57.com-体育彩票是怎么买的| www.137243.com-七彩冰激凌-| www.13592.cc-彩票网站源码下载| www.3114.pw-吉林省彩票中奖| www.20887.com-彩亿时时彩计划| www.91235.cc-赢彩计划安卓版| www.18077.cc-优彩师下载-| www.368756.com-快三追号公式| www.7ny.com-彩铅情景画人物| www.588671.com-七星彩精准头尾王| www.825272.com-竞彩猫小鱼儿| www.961768.com-手机微信如何买彩票| www.ah.com-彩票开奖河北快三| www.22oz.com-吉祥彩登陆-| www.239652.com-贵州快三选五一定牛| www.66992.cc-198彩下载app| www.618272.com-福彩3d072字谜| www.788262.com-彩票彩吧-| www.932337.com-彩票作弊事件| www.cp751.com-兰州快三下次开奖| www.wd85.com-彩票开奖号-| www.17rd.com-开彩票投注站多少钱| www.170237.com-河南福彩快三走势图| www.683188.com-彩皇网安卓-| www.889660.com-新凤凰网彩票官方| www.cai9422.com贵州体彩兑奖地点| www.719189.com-二年级仿写彩色的梦| www.865352.com-分分彩开奖记录软件| www.951211.com-奥客网彩票双色球| 亿龍彩票www.67767.cc| www.xp40.com-怎么去彩票店买彩票| www.uu95.cc-手机购彩直播快三| www.876610.cc-南方彩票预测网站| www.970268.com-彩票带单什么意思| www.vb74.com-易彩快三全天计划| www.36vj.com-703彩票登录网址| www.0417.in-瑞彩祥云彩票网| www.8325.top-彩票平台打差价| www.78320.com-菲律宾太子彩票客服| www.173117.com-快三代理中心| www.277644.com-大发快三开奖作弊不| www.375659.com-彩金神龙连线版下载| www.503582.com-香港赢彩网网址| www.9510.vip-彩钢板一吨有多少米| www.924011.com-大乐彩首页-| www.982514.com-时时彩代理的不归路| www.nd6.com-一分快三走势图表| www.258383.com-竞彩足球异常监控| www.092783.com-福利彩6十1-| www.0075.cm-买彩票有几种方式| www.397723.com-七星彩长局表| www.490769.com-天猫国际彩票| www.339009.com-体彩大乐透追加| www.630669.com-爱上彩票什么网站| www.775754.com-石家庄体彩兑奖中心| 金牌彩票www.919586.com| www.34rp.com-传奇彩票靠谱吗| www.231328.com-中彩手彩票下载| www.75737.com-香港线上彩票| www.533867.com-七乐彩出球顺序号| www.236916.com-竟彩比分-| www.307660.com-河南派彩电子走势图| www.037164.com-青海快三助手下载| www.625411.com-1998彩票app| www.709218.com-神彩争霸2-| www.820908.com-彩钢复合板-| www.909966.com-365彩票网首页| 天天乐彩票www.126293.com| www.0597.mobi-快三是什么彩| www.31536.cc-足彩竞彩新浪体育| www.7306.org-彩虹六号nr战队| www.35312.cc-大发快三怎么盈利| www.846339.com-龙山县彩票事件| www.928665.com-够力七星彩图案| www.992545.com-快乐彩票直选3开奖| www.rp69.com-现在彩种是十分钟| www.132573.com-最大的彩票app| www.210192.com-黑彩量刑-| www.869586.com-够力七星体彩下载| www.3051.org-68国际彩票神器| www.8619.biz-如何买广电的彩票| www.27rb.com-拳皇全彩本子| www.67783.cc-福利彩票总部照片| www.pq5.cc-吉林省体彩站更名| www.b82.club-微信福彩骗局| www.686799.com-彩票丢了感觉会中奖| www.772709.com-皇轩彩票-| www.842354.com-福利彩票那一年发行| www.965304.com-哪个彩票最容易中| www.ia3.cc-江苏快三大小技巧| www.ss47.com-上海快三号码推荐| www.09vl.com-七乐彩福利彩票号码| www.83kd.com-下载app彩票| www.1500.in-内蒙古彩票双色球| www.g32.net-106彩票官网| www.742.bid-时时彩对子出现规律| www.132959.com-精彩江苏快三| www.356269.com-购彩下单网址| www.299346.com-幸运分分彩-| www.654487.com-中国彩票销量下滑| www.730794.com-凤凰竞彩下载app| www.811526.com-竞彩足球加奖app| www.894402.com-信彩计划-| www.979464.com-龙彩票-| www.yp61.com-龙胜彩票app| www.75iu.com-伪球迷买足彩胜负| www.3663.cc-周六出什么彩票| www.06292.com-福彩3d试和值号码| www.706128.com-十大外围足彩网| www.059593.com-怎样看快三走势| www.152926.com-彩票开奖自动核对| www.215617.com-彩票开奖预测查询| www.269020.com-98彩票平台骗局| www.881560.com-百胜9b彩票-| 126彩票网www.390126.com| www.480560.com-新浪彩票旧版大全| www.778308.com-七乐彩怎么玩法说明| www.517023.com-1516彩票平台| www.551187.com-内蒙古快三开奖链接| www.104169.com-彩神ix5分快3| www.219924.com-北京快三微信群| www.ru40.com-2m牛蛙彩票开奖直| www.618596.com-足彩培训师报名官网| www.56361.cc-香港彩富网| www.556179.cc-0365彩票网址| www.029132.com-玩彩票最忌讳什么| www.124468.com-彩票历史开奖数据| www.854656.com-什么是快频彩| www.440163.com-英雄联盟彩票在哪买| www.235851.com-竟彩足球比分| www.53024.com-全天最准时时彩计划| www.327234.com-体彩500期走势图| www.247277.com-今日福彩字谜| www.hn21.com-福彩6十1-|