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.870191.com-高频彩是什么意思| www.r53.top-高智商玩彩票| www.92po.com-手机千百万彩票| www.97di.com-博大彩票网址| www.526703.com-八喜彩票官网| www.947821.com-竞猜彩票怎么买| www.22lf.com-app酷搏彩票| www.3325.in-彩色装饰画优秀作品| www.19517.cc-腾讯1.5分彩真假| www.251151.com-中福网彩票-| www.50ja.com-狗万足彩-| www.5952.win-湖南体彩网技巧| www.56635.com-火箭彩票下载手机板| www.026865.com-足球竞彩34彩票| www.129711.com-七星彩特区论坛头尾| www.tc23.com-澳门彩票平台送彩金| www.fd54.com-七星彩赔率是多少| www.04go.com-彩铅画可爱动漫少女| www.361.cx-55彩票官方-| www.5626.bid-宁夏彩票-| www.12721.com-nba博彩软件| www.68801.com-亚博体育能买彩票吗| www.209845.com-鸿运彩票网合买平台| www.288516.com-彩票平台怎么刷流水| www.590920.com-东北结婚彩礼钱给谁| www.680232.com-彩票应用下载| www.755759.com-旺彩超级大乐透| www.73767.cc-火箭军米彩正品大衣| www.039016.com-体彩手机购彩客户端| www.145543.com-香港正版彩票大全| www.254081.com-华宇彩票下载地址| www.344646.com-国乐彩官网下载| www.449827.com-现场直播彩票补拍| www.555747.com-七乐彩走势图30| www.fs95.com-精彩十分玩法走势图| www.p53.in-万达彩票是真实的吗| www.50jr.com-天猫彩票投注可靠吗| www.0881.net-博彩官方论坛| www.7039.vip-最新竞彩258球迷| www.23526.cc-彩神争霸大发快三群| www.76933.cc-优彩彩票下载| www.062975.com-加盟福彩-| www.163194.com-福彩3d黑龙字谜| www.07pi.com-动漫古风彩铅画| www.1335.vip-亿游网彩票平台| www.13129.cc-分分彩有什么平台| www.77914.com-六爻测彩票断决1| www.056759.com-腾讯1分彩开奖结果| www.842348.com-竞彩足球公益金比例| www.957852.com-彩帝彩票app| www.cp9579.com-中彩网是不是合法的| www.zr99.com-七彩云南欢乐世界| www.67iv.com-朔州市体彩中心| www.2060.live-爱彩人彩票网大乐透| www.8008.mobi-什么彩票玩的人最多| www.35144.com-qq群玩彩票-| www.89951.com-福彩3d藏宝图| www.064323.com-500彩可靠吗| www.151277.com-湖北快三号码统计表| www.256240.com-易盈彩票苹果版| www.13dj.cc-紫色好彩爆珠| www.294763.com-体彩排列三断组| www.383363.com-海南体彩官方网站| www.529134.com-活出最美的彩虹歌词| www.620592.com-如意彩票快三骗局| www.712098.com-彩票6十1开奖查询| www.815759.com-体彩中奖号| www.883123.com-多彩投众筹是否合法| www.949347.com-长沙彩票大奖新闻| 6678彩票www.2788cai.com| www.hl30.com-江苏福彩快3开奖| www.r35.mobi-香港快三有什么技巧| www.63by.com-福彩基诺开奖| www.0668.tv-福彩攀枝花电话| www.81137.cc-石家庄福彩中心地址| www.069310.com-河北福彩网站| www.154456.com-彩票下载下-| www.237962.com-下栽宁夏快三走势图| www.315179.com-福彩7乐彩-| www.383291.com-陕西快三开奖时间| www.489554.com-小白彩票老版本| www.589772.com-体育竞彩首页| www.665649.com-聚华体彩app| www.735999.com-新彩吧试机号开机号| www.805420.com-河内时时彩官网地址| www.889838.com-七乐彩哪一年发行| www.25dj.cc-下彩彩票客户端触屏| www.1629.com-恒彩彩票注册| www.374935.com-体育彩票三等奖| www.39id.com-广西彩调-| www.0050.wang-给几组彩票号码| www.6418.org-足球彩票单场玩法| www.36877.com-北京28正规彩票么| www.91985.com-迪士尼彩票乐园官网| www.083669.com-玩彩票跟计划靠谱吗| www.164198.com-今日篮彩专家推荐| www.254004.com-手机彩票哪个软件好| www.343046.com-靠时时彩翻身的人| www.841266.com-卖60注彩票多少钱| www.906531.com-分分时时彩万位技巧| www.573015.com-ok8us福彩门户| www.688616.com-手机短信怎么买彩票| www.789465.com-在哪里买中超竞彩| www.ds79.com-彩福彩票下载| www.vw94.com-一分钟快三怎么赢| www.py42.com-9彩彩票是正规的吗| www.253579.com-87彩店官网app| www.388013.com-87彩票店邀请码| www.511307.com-彩客网竞足胜平负| www.615259.com-彩票软件开发系统| www.712605.com-彩票做私庄吃了几万| www.791412.com-福利彩票机选一注机| www.870627.com-广西快乐双彩| www.100547.com-乐彩客ios链接| www.196900.com-预知快三软件| www.285812.com-香港体彩开奖结果| www.535981.com-彩票买几个好| www.737631.com-福彩电脑版3d诗谜| www.855026.com-金冠彩票下载安装| www.917100.com-亚洲彩票平台靠谱吗| www.ki0.com-河南快三app下载| www.739168.com-点点中彩票下载| www.855227.com-点彩流釉-| www.952476.com-彩票验奖app| www.993422.com-足彩2串1入门教程| www.ag00.cc-大奖网彩票-| www.884141.com-网上彩票作弊器| www.954855.com-瑞彩祥云富强彩票| 七彩www.53900r.com| www.25771.cc-彩票驿站是真的| www.77995.com-快三河北推荐| www.092866.com-福彩61生肖走势图| www.153319.com-快三走势图下载| www.230065.com-916官方彩票网| www.486929.com-取缔高频彩票| www.698837.com-6加1彩票开奖时间| www.200381.com-熊猫彩票是黑平台吗| www.350918.com-彩票现在还有人买吗| www.514299.com-赢彩彩票好吗| www.629535.com-爱赢钱彩票-| www.998246.com-网赌248彩票| www.gz42.com-3d预测家彩-| www.961701.com-五分彩万位稳赢公式| www.ls9.com-七星彩-| www.720.in-彩票分什么彩种| www.7798.me-胜负彩手机新浪网| www.43xr.com-七彩阳光教育曲靖| www.3377.net-147彩票网-| www.06151.com-七彩网软件-| www.081323.com-彩票中大奖横财预兆| www.672527.com-彩票联盟平台网址| www.784800.com-小米彩票官方网站| www.888698.cc-内蒙时时彩奖金设置| www.y25.cn-3d彩漫时间停止| www.81ol.com-佛山市彩票-| www.6090.in-关于陶彩票的信息| www.49464.com-88cp彩票-| www.017049.com-河北快三有多少期| www.114443.com-福彩中心窝案| www.231471.com-彩票51中彩下载| www.334233.cc-万禧彩票-| www.453923.com-推荐个足彩群| www.765130.com-彩甜糯333-| www.901960.com-聚诚是黑彩吗|