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天

知道了
9彩注册 www.83hp.com-新浪福彩微投平台| www.89827.cc-日本彩票中大奖| www.649876.com-天牛图库综合彩报| www.365322.cc-体育彩票山东试点| www.14jw.com-街机彩金神龙| www.mu52.com-宝盈彩苹果版app| www.831063.com-好彩萝卜糕-| www.521620.com-体彩大乐透奖池余额| www.48208.com-足球竞彩258彩票| www.62py.com-彩票中奖要扣多少税| www.243918.com-足彩吧-| www.035598.com-猜灯谜猜一体彩名词| www.165069.com-万宏彩票怎么样| www.721172.com-足彩让球盘在哪买| www.870412.com-中博国际彩票干嘛的| www.976142.com-信阳彩礼一般多少钱| www.h42.club-彩票几位数如何中奖| www.2691.xyz-如意彩票官网app| www.04880.com-微信群卖彩票怎么样| 彩客网www.965900.com| www.022484.com-彩票怎样看走势图| www.110159.com-爱彩乐彩票数据提醒| www.756024.com-好彩吧特彩网| www.0036.cn-五位数字的彩票| www.20793.com-竞彩误差值怎么看| www.693596.com-彩票周末可以兑奖吗| www.198814.com-怎样购买体育彩票| www.ts50.com-彩票平台大厅合买| www.79og.com-中了彩票后的人生| www.247995.com-彩票快三群-| www.208331.com-广东快三开奖查询| www.232389.com-红旗彩票怎么玩| www.02700.com-安徽福彩快3预测| www.53287.com-北京极速快三| www.309515.com-正规福利彩票网站| www.587411.com-福彩3d返奖情况| www.706860.com-87彩店下载-| www.156706.com-惠赢彩票app| www.330593.com-掌上购彩七天彩下载| www.770330.com-天下好彩123| www.854066.com-嘉兴福利彩票申请| www.506121.com-特准金口诀测彩高手| www.86613.com-七星彩老鼠精长局图| www.118074.com-中国彩宝品牌| 818合彩www.www.9889hc.com| www.5841.xyz-体彩扑克牌玩法| www.781741.com-彩票怎么交税的| www.866547.com-福彩3d昨天奖号| www.937200.com-彩富彩票app| 500万彩票www.39500b.com| www.001967.com-七彩乐怎么看中奖| www.183882.com-彩票专家免费预测| www.2516.com-阐彩-| www.106084.com-众博彩票的网址| www.082428.com-怎么举报黑彩网站| www.24zi.com-天天爱彩票网站| www.7186.pw-彩宝哪个品牌好| www.548605.com-铁公鸡七星彩| www.e57.cn-中国体彩网官方网购| www.63hn.com-深圳彩票兑奖中心| www.207055.com-至尊快三开奖结果| www.3701.com-竞彩篮球比分场| www.8261.top-本期福彩二等奖号码| www.758567.com-国家体彩返佣金| www.947897.com-体彩中心专管员工资| www.nq0.cc-江苏快三一共多少注| www.9la.cc-北京花园彩票站临朐| www.cp922.com-福建福彩网双色球| www.d53.loan-用人工智能预测彩票| www.93tv.com-1寸彩色近照| www.135365.cc-2元彩票软件下载| www.035009.com-福福彩3d开奖结果| www.861190.com-福彩中奖规则图示| www.ik29.com-中彩那天课文| www.556978.com-52彩票开奖网| www.854328.com-山东体彩官网app| www.951071.com-武汉休闲快三| www.643.me-内蒙福彩官方网站| www.is04.com-今日足彩推荐预测| www.07ku.com-体育彩票摇奖机| www.65ve.com-大同市福彩中心地址| www.165271.com-彩票刷佣金-| www.8830.top-123彩票计划| www.460558.com-实亿彩票平台| www.641033.com-天空彩票金彩网| www.979728.com-福彩网站下载安装| www.fo10.com-怎样破解分分时时彩| www.023957.com-境外网络彩票| www.129473.com-众彩注册-| www.798992.com-专打竞彩让胜| www.940074.com-休彩排列5开奖号码| www.69548.com-彩98下载安装| www.012644.com-有哪些彩票app| www.qi38.com-今晚好彩1开奖结果| www.16ns.com-鑫彩国际是骗人的吗| www.98ac.com-江苏快三走世图| www.1998.site-58彩票电脑版| www.946507.com-中国福彩6十1| www.540121.com-5星时时彩在线缩水| www.672773.com-福利彩票作弊案| www.773335.cc-棋牌送彩金88| www.848058.com-古建彩绘厂家| www.931024.com-彩票体彩开奖大乐透| 大赢家彩票平台www.370583.com| www.my55.com-正规的彩票销售软件| www.30qk.com-彩虹自助下单社区| www.33065.com-快三和值18计划| www.630863.com-彩票6期倍投技巧| www.132897.com-足彩圈-| www.029561.com-利彩怎么玩-| www.940051.com-时时彩幸运农场| www.699765.com-彩客站贴吧-| www.qe50.com-好彩柠檬双爆多少钱| www.974594.com-排列3预测众彩网| www.hx25.com-快三万能和值| www.t27.biz-今天七乐彩免费预测| www.178150.com-内蒙古快三开奖查询| www.321780.com-人工智能分析彩票| www.76wg.com-全国联网非凡彩票网| www.57176.cc-黑彩稳定技巧| www.035900.com-体育彩票宣传语| www.170207.com-贵州快三走势图今天| www.266022.com-宁夏彩民-| www.360777.cc-彩票之家应用下载| www.433274.com-福彩3d一休图杀手| www.589149.com-广西快三豹子走势图| www.732937.com-苏州体育彩票| www.800880.com-就业时报3d天天彩| www.99267.cc-新浪爱彩靠谱吗| www.462883.com-福彩3d黑龙王毒胆| www.750081.com-彩票909-| www.827187.com-体彩排例三藏机诗| www.893579.com-安徽快三和值怎么买| www.959686.com-摩纳哥三分彩骗局| 梦想彩票www.33112b.com| www.it69.com-彩票官方-| www.53mf.com-体彩七位数开奖日| www.92jk.com-彩票性缘23-| www.984411.com-体彩助手是怎么用的| www.739848.com-胜利彩票下载安装| www.885055.com-天马彩票大发快三| www.954965.com-彩票站网上接单| www.306944.com-广东福利彩票中心| www.930991.com-中彩网快3开奖结果| www.049950.com-体彩试机号近30期| www.62jw.com-体彩助手客户端下载| www.866842.com-福彩体彩每周几开奖| www.o66.org-彩票赠送18-| www.678183.com-彩票销售结束时间| www.794833.com-新彩网站-| www.948578.com-一买彩票就中奖| www.92715.com-好聚彩-| www.765505.com-乐盈彩票投注网站| www.971743.com-上海体彩最新app| www.10af.com-彩票是假的吗| www.187723.com-时时彩中奖规则表| www.680808.com-内蒙中福快三| www.796214.com-趣彩网骗局揭秘| www.171878.com-上海快三开奖详情| www.260602.com-中国体彩网电脑版| www.365519.cc-即将开彩-| www.427300.com-淘宝彩票不能买了| www.425700.com-足彩九场开奖及奖金| www.366577.com-爱好48色彩铅色卡|