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天

知道了
彩01彩票 www.872365.com-福彩5等奖多少钱| 彩71www.551412.com| www.e20.cc-杳彩票开奖-| www.110102.com-彩乐透是什么| www.887946.com-官方高频彩直播网| www.983890.com-郑州彩票兑奖中心| www.zl6.cc-河南彩素481| www.yj96.com-5分快三倍投几轮| www.36uh.com-703彩票开奖结果| www.816.win-新彩365app-| www.5860.cm-彩票中奖去哪换| www.23524.cc-彩神争霸官方| www.072015.com-快频彩票下载安装| www.847588.com-竞彩几点开售| www.923285.com-补偿公告腾讯彩票| www.984620.com-奖多多酷彩吧| www.xs2.cc-湖北福彩3d走势| www.ts04.com-华夏彩票网址| www.993821.com-足彩中奖领奖规则| www.261659.com-体育彩票泳坛夺金| www.2117.vip-江苏体彩客户端| www.879232.com-亿彩网app-| www.232338.com-好彩网论坛3d图谜| www.619439.com-十四场胜负彩直播| www.755130.com-金龙彩票app| www.880028.com-天天彩4选开奖号码| www.04xt.com-彩铅创意主题画| www.423691.com-香港聚宝盆彩票网站| www.6006.tv-竞彩二串一稳| www.085538.com-时时彩后三定胆方法| www.602573.com-彩票135-| www.823554.com-天吉网彩票纶坛| 福利彩票www.8039p.com| www.726500.com-爱乐透彩票增强版| www.247997.com-大发快三投注软件| www.657214.com-七彩龙鱼价格| www.791207.com-1980时时彩官网| www.883415.com-网上福彩投注站下载| www.t45.live-中山市福彩转让| www.292931.com-3d新彩吧字谜总汇| www.872590.com-快三技巧绝密杀号| www.985108.com-北京快三怎么玩稳赚| www.hu52.com-福利彩票双色球查询| www.253522.com-湖北快三遗漏360| www.50zc.cc-靠谱的足彩-| www.61681.com-彩票守号10期| www.92378.com-体育彩票一定牛ap| 818合彩www.www.9889hc.com| www.886960.com-网络彩票被骗追回| www.33521.cc-风采和风彩哪个准确| www.095807.com-福利彩票的开奖结果| www.qx50.com-腾讯时时彩规则| www.95jh.com-济南彩票领奖地址| www.3823.bid-代理福利彩票双色球| www.27297.com-彩票投注机多钱| www.006684.com-体彩店装修内部图| www.678813.com-彩金白菜网-| www.al34.com-上官燕七星彩预测| www.64041.com-足彩返还率技巧| www.82571.com-足彩19027-| www.057266.com-动物彩票-| www.021550.com-酷彩吧ios下载| www.052161.com-六喝彩开奖结果| www.77dj.cc-正月初七福彩开奖吗| www.5369.biz-手机购快三-| www.50618.com-足彩怎么玩求详解| www.99142.com-腾讯时时彩后二组选| www.70708.cc-开发一个彩票app| www.bx08.com-快三购买软件下载| www.372751.com-团彩彩票网合法吗| www.937821.com-吉林快三免费app| www.636341.com-七彩冰淇淋机| www.607909.com-亚洲杯足彩购买| www.689661.com-福彩快三一注多少钱| www.596.red-亚彩会怎么注册| www.8588.vip-家彩网排三杀号| www.404081.com-甘肃结婚彩礼多少| www.35958.com-中国福利快乐彩05| www.5378.cm-顺发彩票是真是假| www.30665.com-福彩3d天吉手机版| www.4737.xyz-买彩票没给钱中奖了| www.32244.com-昆明彩色压印地坪| www.0385.xyz-迪士尼彩乐园网址| www.115876.com-彩铅风景画简单| www.57589.cc-青海省快三开奖果| www.272062.com-聚彩手机app| www.368671.com-彩票开户可以注销吗| 500万彩票www.39500k.com| www.557891.com-老时彩开奖结果| www.3154.xyz-kc8开彩吧下载| www.176966.com-五省快三一定牛| www.65590.cc-中好彩2是多少钱| www.057652.com-福彩三d怪字图| www.069014.com-彩神争-| www.209370.com-朋友玩黑彩每天赚钱| www.569805.com-下载彩88彩票| www.639853.com-1216彩票站| www.707723.com-快3彩票助手| www.771992.com-东方彩票app下载| www.829847.com-娱乐游戏免费送彩金| www.888092.com-彩票106怎么样| www.947782.com-福彩什么时候发行的| www.985201.com-360彩票资讯网| www.lm7.cc-快三真的能赚钱吗| www.pj84.com-河南福彩开奖查询| www.08ah.com-明月珰七星彩| www.029935.com-呼市体彩中心地址| www.j18.cc-新时时彩网-| www.1708.cm-湖北快三大小| www.510005.com-体育彩票黑彩| www.588505.com-大空彩票官方网站| www.849448.com-足彩胜负彩周几开奖| www.936411.com-分分彩怎么刷赚钱| www.999896.com-福彩类似排列五| www.af30.com-六给彩票-| www.961694.com-在手机上如何买彩票| www.117357.com-开发彩票平台| www.185667.com-福彩的宗旨-| www.569.cm-励赢彩票是真的吗| www.3547.cn-冠军彩票-| www.297268.com-37彩票平台| www.874820.com-7k官方彩票下载| www.650540.com-彩虹伞的玩法教案| www.ta42.com-福彩有哪些彩票| www.28ra.com-搜狐彩票平台怎么样| www.4326.com-鑫彩彩票平台登入| www.852434.com-北京时时彩五星漏洞| www.935605.com-福彩3d彩神吧| 华人彩票www.hr1888.com| www.72kj.cc-六加一彩票开奖结果| www.6ev.com-微信分分彩app| www.1100.top-竞彩总进球全包打法| www.254092.com-彩客彩票苹果版本| www.208257.com-吉林的快三出来| www.272758.com-江苏快三走势图牛| www.199795.com-中原风彩大星走势图| www.k75.com-天地2分彩走势图| www.856669.com-七星彩胆杀-| www.312555.com-快购彩票3最新地址| www.119958.com-01彩票怎么样| www.919902.com-制作一个彩票网站| www.78503.com-廊坊广阳区彩票中奖| www.988.com-最新够力七星彩| www.38185.com-凤凰彩票潮信群| www.431821.com-彩无敌计划-| www.37936.cc-顶级彩票登陆| www.91853.cc-好彩一的开奖| www.043456.com-在哪买足球彩票| www.908704.com-体彩十一选五玩法| www.964112.com-体育彩票投资技巧| www.518968.com-金博在线彩票登陆| www.618564.com-彩运指彩票走势大全| www.716023.com-福彩3d彩乐乐预测| www.791429.com-湖北彩票巨奖骗局| www.874044.com-极速3d彩票规律| www.08oj.com-彩铅画美人图化妆| www.37gt.com-dd彩是正规彩站吗| www.3322.cc-彩色复印多少钱一张| www.xr50.com-身无分文买彩票| www.le07.com-下载中彩娱乐| www.578208.com-快三群名字大全| www.657371.com-优优反波彩百度百科| www.750938.com-98098彩票信誉| www.862503.com-体彩票开奖直播频道|