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.3412.wang-好彩运官网下载| www.561654.com-买彩网是干嘛的| www.353875.com-双色球天吉彩票论坛| www.107227.com-黑客高手破解时时彩| www.564255.com-横沥东方亮彩厂好不| www.001884.com-七星彩复式注多少钱| www.72505.com-网上玩彩的安全平台| www.981445.com-彩票下级自身返点| www.750679.com-快三彩票手机版| www.879700.com-宁夏银川仟彩摸吧| www.966093.com-福彩3d倍投计算器| www.cp015.com-彩票走势图详解| www.583883.com-好彩票平台官网| www.673097.com-七星彩中奖在哪里领| www.780822.com-谁有黑客彩票软件买| www.857511.com-彩票解太湖诗汇总| www.921227.com-福彩3d什么叫跨度| www.978334.com-梧桐彩票-| www.cp7310.com-福彩三地走势图| www.89874.com-彩票婆婆期期中| www.63hx.com-彩金项链能卖吗| www.670411.com-六个彩玩法-| www.747547.com-红彩会客户端| www.600707.com-彩票导航网-| www.700040.com-五分时时彩玩法说明| www.792732.com-怎么联系福利彩票| www.876933.com-澳客彩票客户端安卓| www.952335.com-马来三分彩开奖| 大赢家彩票平台www.810702.com| www.479873.com-哪里可以买单场足彩| www.509557.com-官网三星福彩app| www.530912.com-时时彩最稳缩水| www.866666.cc-昨日福利彩票| www.953552.com-安徽七乐彩开奖结果| 顶尖彩票www.234297.com| www.mj04.com-重庆事实彩开奖结果| www.11rb.com-彩票天下是不是| www.008614.com-哪种彩票中奖率最高| www.573470.cc-福彩三dk线走势图| www.674054.com-体彩15选5叫什么| www.767613.com-牛蛙彩票软件下载| www.881203.com-日彩网平台-| www.967711.com-彩专家5码2期计划| www.wt67.com-蓝球杀号定胆彩经网| www.0750.xyz-体彩七位数随机选号| www.06669.com-体彩新彩预测| www.75275.com-彩票能赚钱吗| www.087728.com-易彩彩票专用计算器| www.914529.com-优信彩票平台可靠吗| www.62pa.com-云跨境app彩票| www.2398.pw-青蛙彩票123| www.9528.xyz-彩色沥青路面造价| www.217252.com-玩极速快三能赢钱吗| www.333286.com-个人玩彩技巧| www.u18.club-ab双平台彩票对冲| www.3065.biz-海南七星彩私彩吧| www.18556.cc-福彩3d彩圣双胆| www.83948.com-中央彩礼-| www.120456.cc-彩票人入门与技巧| www.850785.com-时时彩总跨度是什么| www.414741.com-重听今天天天福彩| www.326890.com-l75oo乐彩网| www.389726.com-买足球彩票容易吗| www.388145.com-华彩学校-| www.6420.com-精彩应用-| www.990549.com-看竞彩亚盘技巧| www.gd88.com-福彩十选五网络骗局| www.8nl.com-数学家破解彩票规律| www.6372.xyz-胜负彩媒体预测| www.22156.com-时时彩后四万能码| www.67113.cc-福利彩票七彩乐咋投| www.25be.com-凤城十路有彩票店| www.1907.pw-福利彩票销售点查询| www.338135.com-彩票开奖走势规律| www.006965.com-合肥体彩店报价图片| www.29hu.com-体彩大乐透技巧| www.561175.com-天天彩票论坛一码| www.678076.com-快三全部号码表格| www.760843.com-腾讯3分彩计划全天| www.887011.com-奔驰彩票能挣钱吗| www.951364.com-守信彩票赚钱可靠吗| www.998242.com-北京彩票内部人员| www.ur2.cc-快三有没有预测软件| www.949740.com-3d彩票集中营| www.941680.com-93彩票网-| www.624203.com-金彩子官网-| www.735288.com-体育彩票摸奖技巧| www.860759.com-关注彩票开奖结果| www.982475.com-福彩端是不是骗人的| www.hy11.cc-甘肃快三豹子号统计| www.01tr.com-皇赌彩票-| www.556287.com-福彩3开机号| www.55245.com-体彩大乐透开奖频道| www.3143.vip-篮球彩票过关玩法| www.1595.xyz-体育彩票足彩怎么买| www.593494.com-七彩阳光预备节| www.673339.com-从彩票中看出中奖| www.740876.com-今晚澳门彩报1| www.823341.com-彩铝板屋顶| www.956210.com-带人玩彩赚钱| 中国福利彩票www.34788l.com| www.ft20.com-手机怎么投注彩票| www.4436.vip-众亿彩票app| www.9547.cn-海南彩票规则| www.44801.com-网上福彩投注站| 8号彩票www.81520k.com| www.1365.cc-彩票有人真的中奖吗| www.13218.com-快彩网站-| www.55343.com-时时彩怎样做大底| www.58635.cc-3d银海彩报a| www.286668.com-百宝彩票走势图大全| www.388833.com-玩狮子发彩-| 凤凰彩票www.88266u.com| www.691.cm-重庆福彩网打不开了| www.5108.cn-天津市体育彩票| www.53pq.com-共享彩票盈利模式| www.96ev.com-jolly鸿彩灯光| www.087977.com-运彩官网登录| www.809227.com-9号彩票用户登录| www.884974.com-爱彩乐天津十一选五| www.961274.com-广州鸣彩艺术正规吗| www.cp606.com-大发快三赚钱技巧| www.496703.com-十三彩网站-| www.568070.com-买彩票输了钱| www.650659.com-小班美术彩虹伞教案| www.797158.com-多赢彩票-| www.871444.com-中彩彩票是哪个网站| www.cai6533.com快三河北预测号码| www.900869.com-福彩三地小军图迷| www.965588.cc-手机购买彩票| 顶级娱乐www.928621.com| www.il05.com-中国彩票下载安装| www.zb11.cc-福彩3d万能四码图| www.89205.com-盈彩首页-| www.7902.cm-彩票混沌公式| www.60803.com-甘肃省福利彩票用途| www.817915.com-一定牛彩票电话投注| www.886313.com-美术作品新年彩铅画| www.971643.com-福彩端app安全| www.xs2.cc-湖北福彩3d走势| www.539687.com-彩票怎么杀号| www.ji74.com-福利彩票快3安徽| www.4vm.com-如何看体彩是否中奖| www.18ab.cc-即时开彩现场直播| www.84ot.com-快乐五分彩开奖号码| www.887944.com-彩票网站如何推广| www.cai1500.com福彩快三走势图今天| www.667345.com-马来西亚快三| www.150468.com-彩票pk10-| www.236692.com-国外彩票app| www.506323.com-广东体彩投注点申办| www.604974.com-赛马赛果派彩结果| www.697863.com-全民平台彩票可靠吗| www.966809.com-体彩多少天兑奖| www.cai2626.com湖北快三彩经网| www.kb61.com-中国福利彩票分析| www.z08.cn-大猿口算数福彩| www.609111.cc-世界杯彩票停售时间| www.279221.com-吉林快三春节停几天| www.702732.com-聚星pk10彩票| www.792900.com-彩票如何直接兑换| www.242234.com-如何破解数字型彩票| www.330331.com-3d彩-| www.420654.com-彩票兑奖多久到账|