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.79375.com-香港买的彩金好不好| www.565802.com-亿彩彩票安卓版| www.682705.com-中国彩票软件| www.780051.com-足彩预测软件app| www.193023.com-快三能赢钱吗| www.656293.com-大发彩票下载官网| www.10924.com-燕赵福彩排列五开奖| www.245545.com-易彩集团软件靠谱吗| www.395577.com-周日开什么奖彩票| www.575771.com-竞彩网购平台| www.718385.com-彩虹歌词-| www.090382.com-怎样下载凤彩网| www.231130.com-彩票快三大小破解| www.4337.wang-彩票怎么看中奖了没| www.501255.com-迷彩虎讲堂下载| www.53st.com-共享彩票下载安装| www.078818.com-七星彩单式怎么兑奖| www.53681.cc-8k彩票彩种-| www.874156.com-福彩3d布衣天下i| www.980125.com-彩票打票员会很难吗| www.6664.biz-ok高频彩票-| www.34318.com-福彩全麦必中解太湖| www.61151.com-038彩票网页登录| www.900013.cc-福彩快三河北走势图| www.vo70.com-广西快三是什么彩票| www.8213.biz-大富彩票不能提款| www.267579.com-彩票思路-| www.456959.com-彩票梯子游戏网站| www.5009.cm-吉祥彩票稳赚计划| www.41560.com-世界彩票案-| www.54gt.com-彩票遗漏数据| www.328810.com-一分快三在线计划网| www.601615.com-七星彩利民彩票论坛| www.754487.com-旺彩彩票靠谱吗| www.866798.com-福彩昨天的中奖号| www.950476.com-今天七星彩开奖结果| 世彩堂www.5854b.cc| www.9976.vip-体彩大乐透坑不坑| www.87815.com-顺龙彩票-| www.080882.com-7星彩开奖规则| www.21918.com-洛神体彩店怎么样| www.111695.com-快三如何避免对子| www.097048.com-彩霸王中特网论坛| www.338743.com-福彩正版3d藏机图| www.515468.com-冒领彩票-| www.31846.com-彩票结束时间| 55彩票www.755834.com| www.xk33.cc-甘肃福彩中心官网| www.34yb.com-腾讯分分彩正规| www.1163.in-网络彩票术语| www.8918.org-新蜀山烛彩星光| www.727677.com-山东福彩开奖结果| www.vl05.com-三分彩在线计划| www.166202.com-快三开奖结果甘肃| www.337987.com-舟山体育彩票网点| www.28dy.cc-艾彩登录口-| www.666.wang-皇家科技时时彩| www.77qf.com-博彩业在五行中属性| www.10990.com-烟台福彩中心照片| www.91266.com-彩票双色球历史数据| www.082039.com-恒博彩票是真的吗| www.rt14.com-五福彩票苹果版下载| www.50wl.com-鲸彩漆价格-| www.1728.bid-彩票玩家数据| www.03953.com-豪彩娱乐官方网站| www.48270.com-陆慧明看今天足彩| www.53325.com-一分钟时时彩图片| www.310533.com-体彩排三山东论坛| www.941060.com-我想代理一个时时彩| www.994098.com-天天中彩靠谱吗| www.cb23.com-福彩快开彩怎么玩| www.i22.shop-七星彩走势图带联线| www.12328.cc-体育彩票手机投注| www.132755.com-世界杯足彩票| www.004912.com-彩票开奖软件下载| www.1sh.cc-杏彩客户端手机版| www.471703.com-有台湾5分彩的平台| www.619020.com-众益竞彩彩票app| www.693236.com-如何买福彩-| www.0222.cn-时时彩做号工具| www.30ej.com-陕西体彩中心中奖号| www.2212.top-微彩之家推荐号码| www.8247.cn-东方心经彩图资料| www.28293.com-有腾讯五分彩裙吗| www.93663.com-中国有哪些正规彩票| www.126771.com-韩国彩票开奖规则| www.74338.com-詹天佑3d彩票标签| www.iy14.com-浙江体彩中心| www.299008.com-甘肃快三热点早知道| www.394399.com-彩虹六号第四年季票| www.03953.com-豪彩娱乐官方网站| www.69523.com-彩猫彩票正规吗| www.098405.com-中彩股份宁夏快3| www.140339.com-彩票对刷套利| www.227765.com-手机众彩网-| www.899513.com-c81彩票注册网站| www.894867.com-中国体育彩票销售点| www.217552.com-安徽福彩3d走势图| www.033364.com-三十五选七福利彩票| www.50492.com-足球彩票网上购买| www.35877.com-内一排三蒙快三| www.812067.com-天天彩资讯网| www.917753.com-u9彩票被骗-| www.998624.com-体育彩票七位数玩| www.yf3.cc-1分彩稳赚技巧| www.qq65.com-七乐彩没人敢买了| www.5tk.com-玩彩吗是什么意思| www.57sn.com-范伟电影中彩票结局| www.845108.com-体彩足球竞猜胜负| www.965676.com-玩赚彩票app下载| www.al2.com-福彩自助北京快3| www.ql55.com-立彩平台app| www.64va.com-福彩3d猜三同| www.967960.com-时时彩的qq交流群| www.gy77.com-享彩-| www.77.cm-新万达彩票-| www.km14.com-易彩堂下载-| www.927927.com-彩票咋个买几个数| www.998325.com-精准人工快三| www.by80.com-贵州体育彩票网| www.05868.com-怎样用手机购买体彩| www.51971.cc-河北快三三不同推荐| www.594778.com-彩票日分红平台| www.77592.cc-解读新彩票管理条例| www.78843.com-体育彩票排列五字谜| www.08382.com-棒棒彩票头条号| www.82369.com-电脑福利彩票| www.906822.com-快三的中奖概率最高| 68彩票www.68682h.com| www.mk48.com-重庆分分时时彩| www.29hn.com-优彩彩票有几个数字| www.2626.com-彩票大乐透预测推荐| www.8271.top-哪里有假彩票卖| www.30108.com-淘彩票是不是骗局| www.441855.com-体育彩票七星彩定位| www.304567.com-手机彩票分析软件| www.925.cc-临沂体彩机子转让| www.028930.com-梦想彩票正规吗| www.137284.com-做彩票兼职-| www.237074.com-竞彩比分直播新浪| www.318455.com-竞彩彩票官网首页| www.168838.com-安徽快三投注平台| www.278033.com-一定牛彩票软件下载| www.5286.bid-天吉彩票论-| www.622111.cc-五福彩票提现没到账| www.614288.com-日本彩票怎么选号| www.702716.com-盛澳竞彩是不是传销| www.808560.com-天禧彩票正规吗| www.759.red-重庆时时彩对码分解| www.190526.com-大发快三可以赚钱吗| www.278783.com-鸿彩快三是真的假的| www.100303.com-中国福利彩票怎么买| www.188268.com-安徽福彩快三预测| www.89360.com-领先彩票app| www.087232.com-时时彩破解公式软件| www.07744.cc-3d专家彩乐乐| www.74999.com-中国竞彩网任九| www.023882.com-开彩网api-| www.569208.com-数学公式破解彩票| www.674684.com-三杯体彩福彩| www.877115.com-福星彩开奖直播| www.028485.com-举报黑彩-| www.9uf.com-ok彩票能提现吗| www.721979.com-老快三开奖经果|