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.451731.com-彩票还能信吗| www.705012.com-3d福彩天气网| www.87ni.com-淘宝怎么买福利彩票| www.ln88.cc-台北快三-| www.536759.com-快开彩票漏洞赚钱| www.3356.vip-彩色的黑吉克隽逸| www.fi55.com-注册送30现金彩票| www.965815.com-全发国际彩票网址| www.mt03.cc-app购彩-| www.81pc.com-竞彩足球3串1中奖| www.4867.biz-彩票论坛幸运飞艇| www.54439.com-最牛的彩票网名| www.986398.com-今晚足彩专家推荐| www.895627.com-登录福利彩票中彩网| www.8090.net-网彩是怎么玩的| www.562710.com-彩票中奖一个亿| www.840059.com-广西体彩乡镇销售额| www.593875.com-七彩app真的假的| www.018531.com-今日福彩三地开奖号| www.102946.com-大奖彩票app安卓| www.601428.com-美的彩票的网址| www.070065.com-甘肃福彩官方网站| www.675362.com-七彩娱乐-| www.941516.com-篮球彩票胜负3串一| www.52ml.com-江苏丰彩新型| www.056518.com-合肥市体彩中心地址| www.265497.com-足球481彩票网| www.599590.com-十元随机彩票吗| www.3847.me-百彩网免费资| www.497152.com-快三和值的正确买法| www.159736.com-福彩乐透客户端| www.32bi.com-江西11选5啊彩网| www.905812.com-滴滴彩票下载| www.885323.com-彩票收藏红楼梦价格| www.585730.com-彩票一元购注册送钱| www.364418.com-在线购买世界杯彩票| www.362524.com-美丽的彩虹-| www.170345.cc-快三顺口溜-| www.369243.com-宝马彩票是骗局么| www.542365.cc-248彩票苹果下载| www.850519.com-重庆时时彩生肖| www.985893.com-快三三不同号多少注| www.id44.com-彩票没玩-| www.x41.net-今晚福彩票中奖现场| 吉利彩票www.66376f.com| www.262682.com-吉林省福彩兑奖中心| www.na38.com-微彩下载安装| www.24nc.com-手机彩膜图片原图| www.758.win-时时彩和值玩法技巧| www.07300.cc-北京福彩28| www.61511.cc-乐米彩票官网资讯| www.048553.com-福彩大乐透奖金规则| www.a14.online-33zzcc特彩吧| www.7444.cc-体彩店那里开最好| www.830960.com-彩民高手坛ww| www.ji90.com-哪些彩票平台送彩金| www.z14.bid-彩友吧双色球会| www.2438.pw-中免绿好彩拉条| www.8660.biz-七星彩投注机选5注| www.54601.com-白菜彩金论坛| www.059317.com-微信彩票购买| www.021.blue-彩神拿霸ll-| www.35402.com-555彩票官网| www.my93.com-申请福彩快三代理| www.028480.com-玩凤凰彩票输了好多| www.111037.com-0714彩票-| www.8999.mobi-乐彩直播间-| www.47974.com-打彩票怎么打| www.990457.com-福彩三地谜语大全| www.fj23.com-河北福彩双色球开奖| www.xf67.com-七口乜只七星彩| www.914347.com-快三三军一期计划| www.977665.com-在哪买世界杯彩票| www.cp3639.com-体彩排列三-| www.zc35.cc-大发快三公式传授| www.316663.com-爱投彩票官网| www.404032.com-休彩7位数走势图| www.001814.com-技术彩民的彩票专栏| www.070998.com-足彩写手-| www.002312.com-一分时时彩倍投方案| www.072813.com-41c彩票-| www.796070.com-澳客竞彩足球电脑版| www.930962.com-七星彩什么号提醒| 彩多多www.78949h.com| www.vq34.com-快三带玩彩票| www.55um.com-福利彩票10| www.7089.vip-七彩时尚宾馆| www.60282.com-3分快三合法吗| www.607804.com-韩国五分彩靠谱吗| www.682720.com-广州羊城晚报好彩| www.768022.com-彩名堂苹果版下载| www.836320.com-顺丰丰彩怎么玩法| www.903243.com-彩票开奖号码作假| www.970713.com-幸运彩票计划导师| www.cp5226.com-青海快三开奖结果| www.6385.xyz-聚财网买彩票| www.931768.com-体育彩票万能公式| www.181657.com-贵州快三开奖纟结果| www.354498.com-买啥彩票容易中奖| www.495789.com-亚博博彩提现| www.619700.com-体彩店开业活动方案| www.791862.com-中国福彩43期| www.416966.com-福彩中心3d魔图| www.564659.com-河南快三走势图新闻| www.755753.com-中彩网选号助手| www.907770.com-合肥省福彩中心地址| www.jz51.cc-最新彩票app下载| www.x82.cc-棋牌彩票搭建| www.0937.me-湖北快三追号预测| www.874211.com-北京快三和值遗漏| www.zo96.com-七彩阳光-| www.512.pw-中国福彩5分钟开奖| www.8717.loan-快三怎么追大小| www.204234.com-彩票五行计算公式| www.326233.com-彩宝彩票安卓手机版| www.460898.com-世界杯买彩票在哪买| www.631546.com-附近七彩山鸡养殖场| www.746228.com-举报网络售彩| www.846851.com-古建筑彩绘报价| www.974741.com-快三对子号怎么倍投| www.pd74.com-河北快三豹子6| www.89fd.com-浙江快乐彩票总汇| www.403062.com-七乐彩杀号图谜定胆| www.45370.com-买彩票中大奖的新闻| www.560966.com-内蒙古福彩月销售量| www.97al.com-湖北福彩微信二维码| www.5069.com-vr三分彩全天计划| www.35413.com-正规彩票推广老板群| www.015157.com-湖南体彩彩民论坛| www.mt85.com-彩神8快3违法吗| www.370422.com-线上四季彩平台注册| www.262671.com-福彩开奖查询询| www.567626.com-安康福彩中心| www.68177.cc-福彩3d之家电脑版| www.024049.com-六台彩迷宫生死博斗| www.811607.com-qq手机彩票网| www.ax98.com-七乐彩历史开奖号码| www.68098.com-官方重庆彩开奖号码| www.235326.com-福彩网平台软件| www.277228.com-天天彩一分钟开| www.954842.com-瑞彩祥云下载网址| www.75ua.com-竞彩篮球彩票官网| www.5355.club-彩票哪种买的人多| www.63758.com-名人彩票测速| www.3897.wang-竞彩足球单场| www.39642.com-盛兴彩票龙版| www.30516.cc-京东彩票北京28| www.100905.com-福彩3d杀跨-| www.290043.com-中彩网双色球字谜| www.595456.com-篮彩神棍区狗哥| www.9387.org-双色球彩票防伪| www.33093.com-福彩双色球规则图| www.90910.com-好彩1871紫-| www.yo92.com-延吉体彩中心在哪里| www.371331.com-打击越南时时彩| www.618451.com-最近的体彩店在哪里| www.837282.com-立彩app合法吗| 爱彩www.009ac.com| www.ae02.com-河南福彩体彩开奖| www.87te.com-玖玖彩票网登入| www.176303.com-快三qq计划群| www.258796.com-365福彩-| www.334787.com-福利彩票布衣图| www.609298.com-七星彩机选号码中奖|