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天

知道了
1分快三 www.90758.com-好彩丨开奖结果| www.700061.com-五百彩票网股票雪球| www.809009.com-微彩网怎么样| www.13228.cc-常州彩票得主| www.065809.com-彩吧开机号今天| www.009850.com-下彩彩票电脑版| www.46078.com-彩票对打套利视频| www.77556.cc-竞彩滚球术语| www.929326.com-七星彩奖金计算| www.em02.com-快彩荐号专家遗漏值| www.473675.com-牛彩网3d总汇| www.815872.com-福彩3d两码合差表| www.942702.com-go彩官网-| www.574477.com-永久免费彩铃| www.253366.com-好彩妹台词-| www.949353.com-最近彩票中奖新闻| www.hp93.com-足彩310-| www.080291.com-吉林四平福彩快三| www.206.me-彩铅画图片卡通整幅| www.7898.wang-彩票网站开发定制| www.53mp.com-足球彩票查询| www.2051.vip-彩虹世界儿童画| www.080848.com-快3中彩网真假| www.703208.com-爱彩乐专业版app| www.040206.com-快三2同-| www.170700.com-甘肃快三开奖| www.271078.com-彩票77最新-| www.6970.cn-时时彩四星杀号方法| www.730290.com-呼市福彩彩票中心| www.215985.com-中福彩票五分彩骗局| www.003073.com-有人拉我进环球彩票| www.676404.com-天天购彩-| www.813434.com-银川彩票中心| www.891357.com-彩神计划软件官网| www.363058.com-美丽的彩虹像什么| www.7006.wang-足球彩票过关方式| www.29mn.com-体育彩票游泳是什么| www.76677.com-谦喜彩票登陆| www.558.date-幸运分分彩计划人工| www.4634.vip-买彩票想一夜暴富| www.193735.com-吉林省体彩领奖地点| www.578754.com-五星体彩店-| www.657160.com-彩票2元网-| www.378127.com-体彩序列号-| www.825619.com-山西快三54期查询| www.991969.com-彩票都是几个数的| www.404783.com-开门彩预测咨讯| www.796115.com-尊彩开了几年了| www.949631.com-10分钟彩票害人| www.bw77.cc-彩票22app下载| www.4fy.com-天天中彩票人工客服| www.373.date-福彩3d牛人票票| www.68ex.com-地球纪元彩虹之门| www.82bq.com-竞彩大咖ios| www.31982.com-怀城体彩店app| www.k49.top-诺亚彩票平台靠谱吗| www.55my.cc-福利彩票1011| www.wh00.com-甘肃逸彩快三走势图| www.554719.com-福彩对望码-| www.63970.com-t×4cc天下彩| www.056061.com-各类彩票彩种分析| www.128917.com-彩民在线双色球| www.285225.com-快三跳法视频| www.617266.com-久久彩票网可靠吗| www.658621.com-受彩乐-| www.620.tv-时时彩全天个位计划| www.91758.com-500彩票网登录网| www.79vb.com-篮球竞彩网预测推荐| www.934626.com-今日福彩相年富| 吉利彩票www.80065g.com| www.zd86.com-福神正德彩票| www.87ka.com-旺彩双色球3d断组| www.535769.com-有11位的彩票吗| www.880485.com-75彩票合法吗| www.cn63.com-玩时时彩会坐牢吗| www.11ql.com-西安天彩粮骗局休假| www.1197.cc-彩票路珠怎么分析| www.46252.com-彩票站每天如何对账| www.038335.com-779彩票平台网址| www.a58.vip-香港老彩民研究心得| www.035947.com-彩神计划软件官网| www.92768.cc-小彩牛首页| www.131105.com-洛阳洛龙区彩礼多少| www.285233.com-亚投大发快三计划| www.76628.com-3d牛彩会-| www.984362.com-广州鸣彩倒闭了| www.k96.cc-彩神规律-| www.053178.com-0500彩票下载| www.q19.bid-鼎吉国际彩票骗局| www.pg57.com-福彩3d开机号彩吧| www.759.live-牛图网3d福彩| www.23592.cc-达人彩票首页| www.442260.com-网易红彩怎么样| www.546178.com-体彩换纸-| www.625312.com-爱中彩票网页版| www.755001.com-彩票iq南方彩网| www.731745.com-彩钢瓦围挡材质| www.008063.com-甘肃福彩快3直播| www.20909.cc-竞彩足球数据分析网| www.027922.com-棒棒彩票计划网| www.160272.com-财神彩票官网| www.cai991.com-快三规律破解| www.788.space-复式彩票概率| www.40714.com-中彩江苏快三| www.038052.com-爱彩乐广东11| www.235331.com-138彩票手机版| www.519420.com-福利彩票最早的大奖| www.635697.com-七彩娱乐血战麻将| www.314474.com-怎么看福利彩票开奖| www.209039.com-51彩票主页-| www.079652.com-福利彩票几点开| www.89305.com-和乐彩票极速赛车| www.208384.com-快三软件下载安装| www.311667.com-体彩任务怎么中奖| www.82897.cc-彩票开奖直播网| www.039703.com-中国彩票的合法漏洞| www.141888.com-南京时时彩诈骗案| www.219552.com-体彩快乐十分钟软件| www.611645.com-双彩网论坛app| www.716911.com-儿童可爱彩铅画| www.801676.com-陈华就赌一个胆福彩| www.888935.com-彩站宝官网-| www.975302.com-福彩通下载安装| www.go22.com-内蒙古彩票快3| www.503740.com-彩票代码是什么| www.616511.com-微信小程序彩票制作| www.610691.com-百宝彩账号和密码| www.059001.com-江苏快三辅助软件| www.356656.com-宁波员工彩票| www.82al.com-七星彩网解码梦| www.8395.cn-易利三分彩全天计划| www.947573.com-福彩双色球视频直播| www.h63.net-彩票走势图大全软件| www.030085.com-大地彩票官方下载| www.288293.com-爱彩乐旧版下载| www.566365.com-福彩体彩在一起| www.148770.com-彩票追号投注计算器| www.567867.com-福福建福彩网| www.841482.com-七星彩内部资料书| www.cp4004.com-分分快三计划软件| www.845946.com-私彩案件-| www.121721.com-彩票刘亮-| www.39697.cc-福利彩票二等奖| www.019572.com-体彩竞彩比分| www.686858.com-中彩那天的教案| www.788277.com-彩票平台给彩金| www.yf2.cc-玩彩绝招-| www.239115.com-套彩金违法吗| www.222224.com-彩票过完年几号开售| www.412388.com-竞彩9场几点开奖| www.503766.com-如何买彩-| www.09994.cc-别人推同乐彩彩票| www.57zt.com-七星彩一注守号| www.783788.com-快三彩票投注平台| www.553209.com-建瓯小张竞彩| www.gg99.cc-江苏体彩网大乐透| www.389.cn-1分彩开奖号码| www.3683.in-彩票吉林彩票快三| www.ea93.com-玩吉林快三的app| www.2726.vip-牛彩跨度字谜| www.32972.com-体彩第19044期| www.050093.com-手机微信怎么买彩票| www.154218.com-竟彩资讯-| www.1787.vip-彩票行家com|