QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery tab图标选项卡内容切换代码

原创商用 jQuery tab图标选项卡内容切换代码

jQuery图标文字tab选项卡切换,制作帮助中心tab图标项目内容切换代码。注册/登陆、活动设置、奖品设置、活动管理、核销系统、公众号授权tab切换页面。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="classes-wrap content clearfix">

	<div class="classes-item active">
		<i class="icon icon-login"></i>
		<span class="text">注册/登陆</span>
	</div>

	<div class="classes-item">
		<i class="icon icon-config"></i>
		<span class="text">活动设置</span>
	</div>

	<div class="classes-item">
		<i class="icon icon-award"></i>
		<span class="text">奖品设置</span>
	</div>

	<div class="classes-item">
		<i class="icon icon-manage"></i>
		<span class="text">活动管理</span>
	</div>

	<div class="classes-item">
		<i class="icon icon-verifcation"></i>
		<span class="text">核销系统</span>
	</div>

	<div class="classes-item">
		<i class="icon icon-wechat"></i>
		<span class="text">公众号授权</span>
	</div>

</div>
<!--内容-->
<!--1-->
<div class="list-wrap content active">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">注册/登陆</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>
<!--2-->
<div class="list-wrap content">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">活动设置</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>
<!--3-->
<div class="list-wrap content">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">奖品设置</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>
<!--4-->
<div class="list-wrap content">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">活动管理</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>
<!--5-->
<div class="list-wrap content">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">核销系统</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>
<!--6-->
<div class="list-wrap content">
	<h3 class="classes-title list-title">
		<i class="icon-question"></i>
		<span class="list-title-text">公众号授权</span>
	</h3>
	<div id="list-wrap-content">
		<div class="list-content">
			<div class="list-item">
				<a href="#">员工帐号怎么登录?</a>
			</div>
			<div class="list-item">
				<a href="#">怎么注册帐号?</a>
			</div>
			<div class="list-item">
				<a href="#">在哪里注册帐号?</a>
			</div>
		</div>
	</div>
	<div id="pagination-wrap">
		<div class="pagination">
			<span class="pagination__item"><</span>
			<span class="pagination__item ">1</span>
			<span class="pagination__item is-active">2</span>
			<span class="pagination__item">></span>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		$('.classes-wrap .classes-item').click(function(){
			var i = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.list-wrap').eq(i).addClass('active').siblings().removeClass('active');
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
七乐彩票 www.739822.com-福彩守号3d大奖| www.49nv.com-生日彩票自动选号| www.028754.com-怎么在百度买彩票| www.386171.com-鸿彩彩票网站| www.889.gg-江苏快三倍投盈利表| www.8910.space-竞彩比分中奖图片| www.815120.com-台湾时时采彩开奖| www.914615.com-乐彩网工具表| www.975724.com-驻马店上蔡县彩礼| www.cp7991.com-福彩快三真的很坑人| www.087067.com-彩福下载-| www.797768.com-网上彩票能买吗| www.637065.com-miui彩虹电池| www.946198.com-下载福建体育彩票| 盈彩www.890751.com| www.yt41.com-长春体彩去中心兑奖| www.93xp.com-双色球彩票兑奖规则| www.325786.com-彩宝网手机版| www.187688.com-时时彩九码稳赚| www.1898.biz-玩彩网和500彩票| www.9797.hk-买高频彩输破产| www.320087.com-全国各地彩票开奖| www.9861.me-古建彩绘工程报价表| www.53300.com-分分彩计划工具| www.636594.com-彩虹六号隐藏技能| www.772566.com-彩票七七七-| www.930992.com-7星彩开奖结果查| 盛彩网www.41518u.com| www.254152.com-福利彩票加盟| www.228337.com-河南彩票双色球| www.003678.com-千懛禧彩之源彩票| www.559.in-时时彩龙虎计划网| www.018447.com-下载彩73-| www.52111.com-下载双色球彩票预测| www.964430.com-七星彩解梦数字| www.597236.com-亿发彩票坑-| www.vs27.com-数学老师买彩票| www.97ik.com-博彩王秘旨-| www.082071.com-彩钢围挡单价| www.42id.com-富彩彩票手机版| www.744040.com-中彩网彩票走势图| www.093568.com-麦久彩票网酒色财气| www.254218.com-手机下载爱乐彩| www.03710.cc-怎么能戒掉买彩票| www.55186.cc-北京时时彩开奖网址| www.lp34.com-创富彩票平台靠谱吗| www.984107.com-辽宁福彩网手机版| www.2848.vip-七星彩中奖怎样领取| www.70644.com-一品彩票网下截| www.78495.com-天天彩论坛-| www.039915.com-4s彩票高手论坛| www.128422.com-江西多乐彩组选走超| www.77169.com-qq彩票软件下载| www.470087.com-英国买足球彩票| www.89594.com-好彩连连-| www.404085.com-福彩17500开奖| www.539726.com-手机福彩app| www.630803.com-好彩1871欧盟| www.916835.com-彩票33被骗-| www.981104.com-福彩快三怎样注销| www.0074.top-王者彩票苹果版| www.9723.pw-历史上彩票大奖| www.963657.com-彩票高手投注技巧| www.26563.com-人人中彩票联系方式| www.412135.com-苹果原彩显示在哪里| www.518276.com-彩球游戏教案| www.587190.com-彩票网站投诉| www.655043.com-溢彩的意思-| www.ko16.com-梁老师福彩3d推荐| www.990853.com-安徽快三实用表格| www.lm56.com-分彩彩票app下载| www.438916.com-中国福彩加盟费多少| www.90931.com-豹赢彩票真假问题| www.107362.com-福彩3d图迷总汇图| www.249178.com-新星彩贵宾中彩| www.262566.com-彩票44-| www.39846.com-彩16.apk-| www.512192.com-三d彩铅画-| www.661300.com-彩票号码之间关联| www.468969.com-3d乐彩网摘首页| www.597234.com-众亿彩票app| www.829176.com-彩管家5.0版本| www.940357.com-福彩48期开奖结果| 金冠彩票www.49956i.com| www.554286.com-搞笑彩票微信名| www.699802.com-玩彩票输钱了怎么办| www.807108.com-回收彩票-| www.875196.com-彩票亿元大奖故事| www.b15.bid-福彩试机号金码今天| www.95sm.com-香港赢彩网网址| www.3596.pw-彩票预估-| www.8695.top-昨天七星彩开奖结果| www.17yb.com-彩金项链断了能接吗| www.53671.com-中国竞彩网点分布| www.51852.com-彩名堂苹果手机版| www.kj65.com-彩45彩票-| www.6068.cm-足彩胜负14场推荐| www.55401.com-各彩种开奖网| www.015754.com-808南国彩票论坛| www.106342.com-国外彩票的真实性| www.iu96.com-足彩今日稳胆| www.677226.com-彩色包装盒印刷厂| www.400749.com-七星彩近30期走势| www.49pf.com-彩钢板310板型| www.53271.com-发彩网论坛-| www.91475.com-全民福利彩票赚钱| www.645038.com-翼彩宝客户端下载| www.74ei.com-万彩吧真人预测| www.363941.com-彩虹光男头像图片| www.907020.com-中国福彩快乐十分| www.q03.net-福彩3d777彩报| www.794044.com-禁止公务员买彩票| www.868227.com-信博彩票官方网站| www.920701.com-下载彩票争霸| www.980467.com-广西百色体彩店申请| www.cp817.com-贵州福彩快3走势图| www.uh24.com-福利彩票官方网站| www.ns31.com-福彩大奖兑奖流程| www.9440.in-福彩三地字谜开后门| www.659728.com-彩票软件万能大马彩| www.718503.com-江苏快三网购| www.779365.cc-福彩3d双彩网论坛| www.840522.com-福彩刷流水挣钱吗| www.905032.com-快三一分钟开奖| www.961853.com-三彩服饰官方| 超级彩票www.901068.com| www.778130.com-福彩7乐彩中奖图片| www.992346.com-快三9手必中| www.612932.com-乐彩网贵州十一选五| www.261025.com-足彩奖金-| www.851284.com-手机免费彩票计划| www.183906.com-快三群主怎么赚钱| www.577591.com-福彩三d图谜第二版| www.796789.com-微信上买彩票怎么买| www.099266.com-彩票360官网| www.919893.com-写个彩票软件多少钱| www.010592.com-实时彩玩法介绍| www.hh20.com-全能中彩彩票假| www.244737.com-中国竞彩足球彩票| www.522912.com-东方彩票套彩怎么套| www.dp25.com-彩6下载安装| www.30sw.com-山东体彩兑奖说明| www.cp72.com-上海天天彩选四| www.462342.com-高频彩网站哪个好| www.00050.com-爱投彩票官方app| www.aa44.com-快三追号倍投计算器| www.306.cn-彩票中奖官司| www.xb07.com-河北快3彩经网| www.uc13.com-快三遇到龙怎么办| www.044.biz-朱雀彩票app| www.731515.com-广东福彩精彩十分| www.934995.com-体彩电视-| www.fe24.com-快三第一门户| www.088829.com-彩票中奖窍门| www.79pb.com-福彩3d布衣图出来| www.062415.com-彩票166登陆| www.149004.com-全能彩票-| www.218878.com-彩神邀请码在哪里| www.397423.com-体育彩票利润| www.98758.com-免费时时彩源码论坛| www.902177.com-彩票报纸种类| www.968484.com-作弊彩票-| www.cai6663.com长春快三开奖号| www.206313.com-彩票江苏快三官网|