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.599174.com-易彩乐正规吗| www.141838.com-彩票中砍龙技术| www.369090.com-彩票体彩开奖号| www.731603.com-快三回血上岸| www.17571.cc-重庆时时彩套路法| www.026572.com-苹果下架博彩app| www.078858.com-幸运时时彩走势图| www.872813.com-369官方网彩票| www.26in.com-彩票加盟代理电话| www.128444.com-一分快三ios下载| www.5372.cc-百彩网资料网址| www.26181.cc-雨后彩虹形成视频| www.80350.com-河北省体育彩票中心| www.290701.com-内蒙快三总共多少期| www.106435.com-彩77有安卓么| www.tt32.com-足球彩票在哪买网上| www.532859.com-澳门5分彩开奖规律| www.268381.com-福彩双色球手机购买| www.352932.com-热购彩票真的吗| www.459544.com-竞彩单关推荐| www.554415.com-买的彩票怎么查| www.620041.com-如何购买国外的彩票| www.697018.com-福利彩票开奖软件| www.120012.cc-福彩投资是骗局吗| www.211171.com-大发快三怎么玩赢钱| www.561516.com-天际彩票必中方法| www.637903.com-哈市彩站出兑转让| www.751282.com-今日彩票28-| 体彩网www.3890i.com| www.69331.cc-竞彩专家推荐预测| www.2870.vip-幸运赛车体彩| www.90su.com-首彩-| www.14124.com-小米彩票下载| www.420323.com-9亿彩票的计划网| www.730812.com-中福在线是什么彩票| www.953328.com-牛牛网彩票福彩| www.43.hk-国家高频彩票害人| www.28912.com-彩票有中奖的吗| www.039024.com-内蒙古快三派奖活动| www.223907.com-uu彩票改名了| www.825949.com-福彩网络销售| www.961481.com-掌上彩49887| www.13ar.com-8亿彩新版下载| www.41sa.com-查询乐e乐彩网址| www.497441.com-彩27下载-| www.134527.com-缅甸好彩柠檬双爆| www.386199.com-代玩彩票账号| www.743458.com-众彩铁路导购线| www.867600.com-算局七星彩奖表划归| www.948902.com-福彩内部数据| www.cp197.cc-大发快三登录平台| www.022569.com-彩票大数据彩经网| www.561037.com-彩票200期走势图| www.657867.com-云南体彩app| www.838314.com-竞彩博冷什么意思| www.886351.com-正版玩彩网app| www.974321.com-福彩三d昨天开奖号| www.of72.com-快三作弊软件免费| www.288637.com-怎么看彩票长龙| www.739184.com-高频时时彩平台| www.0er.com-彩客网胜平负14场| www.83tx.com-天彩粮肉夹馍加工| www.639351.com-济南体彩店转让| www.329.in-德晋彩票欺诈| www.5054.win-旺彩双色球推荐号码| www.1093.vip-竞彩稳定盈利模式| www.979285.com-彩71app下栽| www.070880.com-688彩票网-| www.961819.com-登录福利彩票系统| 大赢家彩票网www.83033u.com| www.738591.com-民彩网app-| www.866745.com-昨天福彩号是多少| www.0651.cn-时时彩星二计算| www.017144.com-快三投注表-| www.026946.com-福利彩票玩法介绍| www.041218.com-买彩票能中大奖真相| www.441482.com-福利彩票网上投注| www.084678.com-六开彩开奖结果v| www.072223.com-光大彩票-| www.672938.com-爱彩乐吉林-| www.777793.com-中彩网3d开奖数据| www.873961.com-内蒙古彩票网| www.940368.com-福彩好彩三开奖结果| 天朝彩票www.89893.cc| www.19128.cc-彩票中奖查看器| www.885795.com-彩神5号彩-| www.3191.com-七彩几位数-| www.17265.cc-彩票通cpt资讯版| www.279681.com-竞彩500即时比分| www.173912.com-快三注册平台| www.248813.com-28高频彩怎么玩| www.20018.com-辽宁全运彩十一选五| www.76xf.com-彩票投注计算| www.2514.cn-华宇装潢腾讯分分彩| www.8151.loan-彩票竞彩网靠谱吗| www.21351.cc-彩神江苏快3全能版| www.55779.com-网上买第1彩票报吗| www.926841.com-彩票10选6-| www.978755.com-好彩1开奖走势| www.qi83.com-广东好彩1预测分析| www.o66.top-彩票可以作为赠品吗| www.21128.cc-体育彩票和福彩开奖| www.202871.com-湖北省福彩官网| www.75rf.com-什么彩票刷流水稳| www.97808.com-聚彩票骗局揭秘| www.69111.com-快三每天几期| www.892811.com-成化珐琅彩特征| www.951975.com-彩天下靠谱吗| GO彩www.chi32.com| www.5557.win-下载d8彩-| www.09917.com-乐彩网双色球| www.52526.com-足彩胜负平怎么玩| www.07094.cc-七星彩梦册解梦| www.110347.com-体彩和福彩合并| www.0530.loan-江苏快三骰子分析| www.383119.com-大乐透彩票能折叠吗| www.521280.com-网上彩票群骗局| www.402648.com-驻马店结婚彩礼多少| www.222010.com-特区彩论坛-| www.120487.com-宝马彩票老宝马登录| www.567944.com-泊利娱乐彩票下载| www.384559.com-彩票口号-| www.516365.com-中福彩票是正规的吗| www.583662.com-时时彩后三走势| www.639842.com-东方集团三分彩票| www.258069.com-时时彩大赢家软件| www.331570.com-乐彩官方投注平台| www.421802.com-dt大通彩票手机版| www.541403.com-七星彩网站-| www.232760.com-贵州快三三星走势图| www.333937.com-体彩怎样选号| www.850942.com-一分时时彩怎么玩法| www.aw13.com-内苎快三预测号码| www.858662.com-彩票开奖双色球日期| www.586874.com-南方双彩绿色版下载| www.722134.com-体彩门头制作规范| www.846253.com-网络私彩破案近期| www.985339.com-皇冠竞彩是什么| www.369483.com-t星彩开奖-| www.111286.com-盈盈彩票手机版| www.219981.com-中彩网快三走势图| www.64649.com-竞彩足球对冲必胜| www.949308.com-反水10点彩票平台| www.85979.com-铝板彩涂-| www.h18.xyz-维希亚七星彩预测| www.761247.com-阿里彩票官方网站| www.867900.com-七星彩中间数走势图| www.962252.com-福彩3d跨度技巧| www.fy27.com-网上微信彩票诈骗群| www.761480.com-搜神传电视剧好彩妹| www.937798.com-怎样注册易彩娱乐| www.649433.com-专家福利彩票预测网| www.746183.com-自助彩票-| www.125.net-如何分析彩票| www.96559.com-懂球帝足球彩票圈| www.121645.com-谁有彩票交流群| www.ag44.cc-往期福彩开奖| www.366860.com-彩铅手绘麋鹿图片| www.503833.com-博雅彩-| www.26280.cc-彩吧论坛下载| www.345221.com-彩神通关注码两码| www.638563.com-嘉定区体育彩票管理| www.1713.cn-今天彩票3d推荐号| www.40952.com-彩拾彩票官网下载|