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.300559.com-网上搏彩平台| www.80hv.com-福建福利彩票摇塞子| www.89671.com-2019实体彩票站| www.210104.com-江苏快三官方网站| www.6926.vip-七彩视界卡密激活| www.1693.com-体彩星期几开奖| www.228832.com-好彩一开奖结果查询| www.443310.com-彩通3d金码是多少| www.40844.com-扬州彩民大乐透| www.019317.com-铜仁彩票中心| www.933785.com-福利彩票在哪里兑奖| www.cp2208.com-大发快三技巧讲解| www.on73.com-七乐彩中奖号码表1| www.9ca.cc-体彩买几个好| www.7263.biz-分分彩手机做号软件| www.958646.com-1分钟1开的彩票| www.li6.com-河北省快三出奖| www.40bg.com-七星彩开奖号码走势| www.956.net-那种彩票简单| www.jl90.com-彩票网站诈骗手段| www.829306.com-彩管家app-| www.914974.com-快三单机游戏安卓版| www.984658.com-8号彩票2018| www.et82.com-北京5分彩开奖记录| www.286622.com-安徽快三是违法吗| www.4156.cm-彩虹演员表-| www.06444.com-新浪网彩票开奖直播| www.166145.com-快三开奖号码| www.603212.com-福建体彩官方中心| www.49589.cc-人人彩票是官网吗| www.001091.com-体彩开奖查查询| www.078559.com-安徽阜阳体彩中心| www.144238.com-360彩票资讯网| www.8640.biz-五洲彩票手机安卓版| www.3296.cc-吾音彩次克-| www.am77.com-全民快三软件下载| www.sq57.com-附近体彩店-| www.59.cc-永安彩票是干嘛的| www.124668.com-福彩3d寻马图汇总| www.127352.com-竞彩足球胜平负投注| www.553130.com-收米彩-| www.242012.com-新2彩票-| www.336973.com-体彩的官网-| www.436758.com-收彩票洗钱-| www.536744.com-菠萝彩双色球分析| www.642132.com-福彩彩票标志图片| www.788940.com-足球竞彩预测网| www.887016.com-凤凰彩票是合法的吗| 幸运彩票www.444537.com| www.744313.com-168手机彩票苹果| www.513911.com-农村彩钢瓦门楼| www.601948.com-七星彩宣传图片大全| www.690661.com-19045足彩-| www.796926.com-凤凰彩票网提不了款| www.896355.com-最好的快三走势图| www.989080.com-彩8aqq下载彩票| www.fu61.com-福彩5d怎么玩| www.u02.cn-彩609彩票官网| www.63jo.com-上海福彩基诺试点| www.0100.loan-彩票店微信头像| www.009513.com-235彩票官网下载| www.161188.com-北京自助彩票站| www.63dj.cc-500彩票论坛| www.2528.site-天猫彩页-| www.00242.com-258彩票在线| www.784721.com-乐迎彩票app下载| www.937921.com-亿彩彩票安卓| E彩堂www.43818k.com| www.cai8022.com上海快三开奖| www.816869.com-时时彩上岸-| www.944859.com-三分钟开的叫什么彩| www.626057.com-玩3d彩票能赚钱么| E彩堂www.43818m.com| www.t78.club-福彩体彩藏机图全部| www.km65.com-足彩比分5o0| www.n76.shop-河南福利彩票网官网| www.126634.com-那个微信可以买彩票| www.351138.com-彩票真的能中奖么| www.55748.cc-竞彩篮彩技巧| www.933246.com-小鹿工具集时时彩| 新壕天地www.277739.com| www.mx52.com-天天福彩下载| www.36489.com-澳门官方哪个彩平台| www.539658.com-彩虹的约定歌词歌谱| www.802410.com-吉林市福彩中心主任| www.640954.com-彩票资金被冻结| www.728968.com-富彩彩票是骗人的吗| www.833559.com-体育彩票如何选号码| www.937307.com-湖北彩妆培训| 彩票坊www.022hk.cc| www.496403.com-22彩票是官方的么| www.6661.cn-帝王彩集团-| www.263327.com-福彩刮刮乐品种| www.380053.com-七乐彩出了什么好| www.21955.com-87体彩app-| www.14un.com-玩时时彩靠谱吗| www.88wc.com-彩票特邀-| www.3545.vip-福彩项目-| www.8495.org-彩贝打鱼app| www.789359.com-彩妆店铺名字| www.807345.com-那个网站可以买彩票| www.997291.com-正规足球彩票app| www.526155.com-王者彩票一218| www.3533.cc-彩票机设备多少钱| www.179156.com-帅哥骗局彩票| www.257001.com-2019彩票店前景| www.721278.com-快三规则及中奖绝招| www.826146.com-员工中3亿彩票| www.906521.com-中国体育彩票头像| www.973933.com-二四六天天好彩| www.28qv.com-128福彩下载安装| www.885923.com-众彩网排列五走势图| www.984032.com-99彩票能不能玩| www.cp6226.com-五分彩在线计划| www.26911.cc-七星彩一周开几次奖| www.626652.com-彩168手机网站| www.821749.com-巨彩娱乐真的假的| www.2hw.cc-体彩店挣钱吗| www.52076.com-彩名堂苹果版下载| www.303132.com-好彩2复式计算器| www.979162.com-好彩香烟哪里买| www.ko44.com-双色球袁老师看彩| www.32633.cc-大发云一分快三| www.966365.com-福利彩票排三| www.lc43.com-彩99下载安装| www.a00.shop-今天上海快三推荐号| www.397043.com-红彩彩票平台| www.683056.com-彩一app-| www.64bb.com-七乐彩走势图300| www.654424.com-梦想彩票站彩种| www.770357.com-开开心心七星彩论坛| www.915382.com-淘宝不能买彩票了吗| www.os80.com-湖北快三带线走势| www.65uw.com-彩票77会被黑吗| www.576942.com-兰州福利彩票中奖| www.983278.com-盈彩是真的假的| www.42jv.com-下载中国彩票开奖| www.2543.cm-灯彩类别-| www.8636.cc-上海福彩3d开奖| www.8368.vip-深圳彩皇电子厂| www.526236.com-竞彩猫指数的安全区| www.637499.com-下载浙江体彩6加1| www.711134.com-烟台市福彩兑奖中心| www.842004.com-彩票z元网-| www.928158.com-彩票赌注那个违法吗| www.979701.com-荆州体彩店怎么开| www.40ye.com-七星彩牛爹统计| www.660140.com-i爱彩彩票-| www.782010.com-中彩票八字案例| www.865196.com-时时彩平台网站| www.cai37.cc-快三平台-| www.113425.com-众彩极速赛车| www.8706.org-中国足球彩票网下载| www.31839.com-牛彩纽约登录地址| www.454989.com-福彩新彩吧-| www.532250.com-福彩申请条件最新| 乐博彩票www.320493.com| www.339059.com-深圳体彩在哪里领奖| www.ok77.com-中国福彩3d开奖号| 融彩网www.rcw321.com| www.nn23.com-彩票选号器手机版| www.74ep.com-中国彩宝市场| www.27682.com-福彩体彩家彩网排了| www.351267.com-买竞彩最后都是输|