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.550497.com-博彩专业论坛| www.en13.com-一定牛彩票可信吗| www.204987.com-江西快三预测与推荐| www.295835.com-安徽快三讲解| www.679.cn-时时彩人工计划稳赢| www.971055.com-值得信赖的彩票平台| www.hc83.cc-彩运8-| www.03ec.com-跟人买彩票-| www.579350.com-趣9购老彩票老套子| www.691303.com-竞彩之王足彩博客| www.788289.com-七乐彩中奖票样图| www.871304.com-彩票大家赢走势图| www.947460.com-福彩p62网购| 500彩票www.26299s.com| www.843818.com-彩票招商代理加盟| www.962096.com-福彩手机app| www.cp2043.com-uu快三真人摇骰子| www.4449.top-马来3分彩人工计划| www.26694.com-七星彩怎么胆拖| www.036627.com-福彩3d一注软件| www.536822.com-福彩3d是国家的吗| www.632896.com-七彩林业招聘| www.755341.com-福彩双色球预测大师| www.863984.com-中国彩客网-| www.941306.com-盈佳彩票-| 彩虹8www.ch8900.com| www.jm89.com-遇到彩票托还赚了| www.00sk.com-彩虹和倒带歌词对白| www.0083.cc-福利彩票地方彩开奖| www.22uw.com-中彩网k彩快3| www.196.website彩38登录网站| www.x73.in-专业彩票网-| www.3795.net-全民足球彩票| www.4972.cc-中澳彩票网-| www.436193.com-重庆福彩走势图| www.619532.com-今晚开啥特马彩票| www.333125.com-体彩最新开奖号码| www.771659.com-怎么申请开彩票店| www.85878.com-58福彩是怎么回事| www.6078.pw-福彩3d奇门遁甲表| www.558964.com-彩虹的约定寓意| www.132041.com-农村订婚彩礼能退不| www.9869.cc-k彩彩民福地官网| www.055392.com-福利彩票分几种| www.180112.com-快三复式投注秘诀| www.729747.com-彩票中奖现实吗| www.866998.com-星期日能买体彩不能| www.421664.com-广西福彩兑奖| www.555923.com-078彩票经销商| www.637468.com-彩票内部人员给号| www.ce9.com-好彩烟有几种| www.c22.club-福彩三d和值表图| www.134827.com-彩运网线路导航| www.719819.com-石家庄快三查询| www.888174.com-万彩吧电脑版| www.ig15.com-人人中彩网下载安装| www.9029.cm-长春竞足彩销售点| www.489863.com-9b彩票百胜登录网| www.685816.cc-28日福彩结果| www.830840.com-三分时时彩出号规律| www.942791.com-众彩易购可靠吗| www.cp4999.cc-上海快三规则介绍| www.167658.com-手机购彩app| www.9812.xyz-香港快三网站| www.86907.com-福彩3d复式-| www.051815.com-华尔兹快三跳法| www.623557.com-竞彩猫官网首页微博| www.773232.com-微彩吧兼职可靠吗| www.957129.com-玩彩彩票安卓| www.zk94.com-两分快三计划软件| www.792031.com-福彩中心栗演兵| www.900240.com-快三最长龙多少期| www.964460.com-足彩现场直播比赛| www.cai8399.com我要福利彩票开奖| www.731676.com-章鱼彩票app| www.093734.com-福彩北京快3走势图| www.215213.com-玩吧快三-| www.563295.com-彩民乐和阳光探码| www.665648.com-体彩店一般到几点| www.597369.com-壹号平台彩票官网| www.18kz.com-传统足彩14场分析| www.4910.me-cc彩球网唯一官网| www.112699.com-神彩争霸邀请码| www.zb38.com-五福彩票网站五福彩| www.n46.top-福彩排列3预测| www.789326.com-官网彩票-| www.mb3.cc-吉林省快三遗漏查询| www.848778.com-彩票微信-| www.81jm.com-足彩全包最牛技巧| www.3377.pw-真钱捕鱼送20彩金| www.089037.com-彩名堂计划最新版| www.275201.com-澳彩网首页-| www.121717.com-怎么开彩票站点| www.226143.com-彩票追号-| www.323672.com-七星彩票开奖查| www.1084.vip-害人的分分彩套路| www.11179.com-中国足彩网八方预测| www.22no.com-天津福彩中心办公| www.2168.top-七彩本草安神方| www.9697.biz-福彩双色球彩宝网| www.28538.cc-腾讯5分彩计划群| www.673078.com-手机彩票作弊器| www.783334.com-足球彩票口碑排行榜| www.900834.com-耽美彩漫肉少爷三人| 幸运彩票www.73166a.com| www.e18.net-全天彩票计划| www.922309.com-重庆易约约彩真假| www.983945.com-唐龙说彩双色球| www.jo.cc-uu快三官方网站| www.ku11.cc-福彩3d丹东全图| www.47046.cc-腾讯3分彩计划全天| www.154007.com-e彩堂江苏快3| www.094978.com-今天三地彩吧图库| 七星乐www.249711.com| www.348301.com-彩客彩票4.7版本| www.872007.com-贵州开体彩投注站| www.978541.com-福彩3d实战彩票网| www.rp24.com-彩民之星破解| www.6405.vip-彩47彩票-| www.26eo.com-小米彩票怎么样| www.623076.com-有正规的彩票网站吗| www.705909.com-浙江省福彩网| www.815960.com-河北十一爱彩乐| www.952945.com-七彩奖号码-| www.gf00.com-8号彩票是不是真的| www.i91.net-彩票注册送的平台| www.033273.com-网上帮人投注彩票| www.938628.com-共赢福彩app| 彩82www.c6313.com| www.127221.com-日彩网靠谱吗| www.882934.com-玩投彩的女生| www.579845.com-朱雀彩票-| www.663473.com-乐彩彩票是真的假的| www.739170.com-彩民红心水高手论坛| www.1ja.com-黑龙江快三平台| www.js90.cc-快三导师靠什么赚钱| www.247991.com-快三微信群贴吧| www.09833.com-山东齐鲁风采七乐彩| www.85038.cc-彩圣字迷今天| www.105453.com-彩票字谜汇总大全| www.516738.com-奇门测彩票号码| www.718672.com-彩虹七色分别是| www.791403.com-重生时时彩老走势图| www.863816.com-七星彩十位专家预测| www.922914.com-体彩扑克3奖金| www.977269.com-新婚姻法彩礼多少| 500彩票网www.867455.com| www.789352.com-故宫彩妆-| www.961928.com-利彩助手追号计划| www.cp534.com-快三哪个平台倍率高| www.039884.com-体彩终端机提现| www.397146.com-我想搜福利彩票| www.544497.com-酷睿彩票-| www.716023.com-福彩3d彩乐乐预测| www.22248.com-最新足彩区欧冠杯| www.95687.com-福彩3d哪年开始的| www.328144.com-3d乐彩论-| www.441400.cc-彩钢瓦机器价格| www.28nt.com-网易彩票数据不更新| www.37589.cc-福彩双色球被切开| www.029680.com-东莞利彩-| www.882002.com-网上的01彩票犯法| www.640122.com-九万彩票客服电话| www.715516.com-体彩22选5-|