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天

知道了
58福彩 www.55286.cc-玩时时彩用概率赚钱| www.017190.com-52彩票网-| www.810122.com-56240彩票-| www.905282.com-伯爵博彩-| www.pp03.com-3d福彩牛彩图| www.46rp.com-cp彩票理财-| www.0684.vip-彩八仙有没有苹果版| www.9072.vip-海南七星彩资料大全| www.365170.cc-华人福星彩网站| www.cp8788.com-福彩快3交流群| www.761724.com-新浪彩网开奖| www.895848.com-快三是福利彩票的吗| www.966843.com-保时捷娱乐彩票注册| www.cai66.cc-快三开奖结果江苏| www.lr45.com-中彩网是什么真的么| www.n97.cc-玩彩票的心态名言| www.47ub.com-88爱彩有没有破解| www.52389.com-彩票怎么发展下线| www.368759.com-算局划规七星彩| www.494913.com-彩漂水成分-| www.568489.cc-彩站宝彩票-| www.028351.com-彩界九歌独胆| www.897075.com-uu彩票直播平台| www.iu4.com-快三单双术语| www.653516.com-中国福彩云南快三| www.736892.com-福彩三d今天晚| www.807074.com-彩票打错单-| www.878615.com-彩神通代理是真的吗| www.13172.cc-彩票大乐透资讯| www.041211.com-下载广西福彩票| www.qe02.com-福彩快3官方| www.50935.com-入侵私彩平台看数据| www.12543.com-快三平投计划| www.10944.com-南京市省体彩中心| www.813154.com-福彩十二选五开奖表| www.80zk.com-深圳彩票开奖号| www.75ox.com-古建彩绘纹样草图| www.055398.com-幸运十分彩走势图| www.120914.com-体彩排列三一等奖| www.345649.com-昨天福彩中奖人情况| www.mh3.com-彩票走势图分析方法| www.945991.com-腾讯10分彩走势图| www.79gs.com-福利彩票31期| www.598589.com-七星彩号码开奖结果| www.810402.com-福利彩票猜谜语| www.892849.com-500彩票下载安卓| www.971123.com-彩票有哪些类型| www.k99.cc-大奖彩票网址是哪一| www.047.org-彩票收藏文化| www.13ml.com-2017年七星彩| www.4574.biz-机选彩票如何中大奖| www.580753.com-快三出长龙的征兆| www.663520.com-nba总冠军博彩| www.993816.com-玩彩票大平台ios| www.ib34.com-微信足彩-| www.693071.com-17彩票官网-| www.638039.com-七星彩是什么意思| www.713155.com-可靠的手机彩票软件| www.790359.com-杏彩官网登录| www.874381.com-福彩76期开奖号码| www.949418.com-体彩11选五复式| 惠民彩票www.hm3988.com| www.025539.com-百事彩票app| www.877057.com-炒彩票怎么玩的| www.66ct.cc-彩票瘾怎么戒掉| www.509923.com-500彩票黑彩| www.608048.com-河北体彩排列五开奖| www.690502.com-澳客网竞彩票网| www.365347.cc-6288彩票下载| www.0722.xyz-万博体彩靠谱吗| www.818795.com-体彩中心周末兑奖吗| www.887361.com-买福利彩票算赌博吗| www.960381.com-盐城开发区彩票| 大赢家彩票www.584511.com| www.ij60.com-彩票在线购买软件| www.zn29.com-彩票一3d开奖结果| www.539052.com-微投彩票平台| www.28cp.com-手机入侵私彩数据库| www.533000.cc-酷彩app安卓版| www.181633.com-安徽快三中奖号码| www.974170.com-手机体彩投注密码| www.al16.com-广东福彩36选7| www.172676.com-贵州福彩宝贝| www.575650.com-网购彩票何时恢复| www.640045.com-七彩飘虫-| www.at69.com-湖北省福利彩票官网| www.w21.cc-诺亚彩票登录| 国彩网www.guocai667.com| www.ay6.cc-不要机选彩票| www.35077.cc-墨菲定律应用于彩票| www.6816.shop-福利彩票2月24日| www.865802.com-安徽快三跨4图| www.wn4.cc-大发快三有什么技巧| www.3044.xyz-博彩世家-| www.29972.cc-名人彩票登录页面| www.912336.com-大发快三趣客站网址| www.975721.com-我中啦彩票网官网| www.cp3306.com-三分快三官网| www.603411.com-网上代刷彩票给工资| www.019832.com-贵阳市彩票店转让| www.sm.com-大发彩票快3网站| www.22891.cc-湖南体彩报第4版| www.502111.cc-093彩票安全吗| www.576348.com-分分快三贴吧| www.648863.com-头彩彩票正规吗| www.751574.com-一彩彩票信誉最好| www.f37.club-中乐彩提现-| www.01854.com-彩678怎么安装| www.126247.com-吉林快三提前看结果| www.664148.com-农行福彩306定投| www.789997.com-坚持机选买彩票| www.855426.com-新浪福彩历吏| www.918577.com-苹果手机上彩票软件| www.971110.com-彩票分哪几种怎么玩| www.if74.com-哪个网站可以买彩票| www.c97.cn-十一选五百宝彩浙江| www.35rk.com-最新酷浪七星彩版图| www.989810.com-彩票开奖公告结果| www.bj90.com-湖北快三下载安装| www.sw20.com-临沂彩票老师| www.8sx.cc-管家婆u9彩票下载| www.304578.com-派彩网手机版快3| www.125910.com-爱玩彩票app下载| www.17nk.com-开私彩票网多少钱| www.911881.com-天天彩票论坛一肖中| www.cp189.com-网络彩票投注技巧| www.21sj.com-彩票的倍率-| www.662902.com-凤凰彩票无马网计划| www.826185.cc-快三数字有规律吗| www.387180.com-尼彩手机大全| www.89336.cc-2019买彩票平台| www.097976.com-万彩万彩吧-| www.92484.com-贵州彩票投注站点| www.339714.com-贵州多彩网众望| www.146977.com-彩吧vip是骗局么| www.400206.com-福彩3d周六走势图| www.733183.com-江苏福彩领奖地址| www.796164.com-彩票双色球选号| www.cp071.com-期期中分分快三| www.135609.com-2018彩票app| www.lf0.cc-北京一定牛快三| www.rq19.com-时时彩二星直选复式| www.19916.cc-红彩视频注册邀请码| www.458156.com-福彩试机号千禧金码| www.007648.com-新快三和值技巧| www.70608.com-网上买彩票彩票| www.777229.com-七公鸡七星彩下载| www.945515.com-一分彩是什么| www.ql7.com-大发快三开奖作弊| www.ua11.com-竞彩足球补赛怎么算| www.891266.com-彩票广告语大全| www.639916.com-中国最大的彩票公司| www.731034.com-激励彩民的话| www.859911.com-体彩排列3d开机号| www.930208.com-大发快三最合理押注| www.sk90.com-中国竞彩首页官方| www.69ze.com-彩票自动核对地址| www.1995.in-彩世界彩票平台| www.914752.com-彩九登录网站| www.68877.cc-彩票选号书-| www.130457.com-竞彩官方大彩网| www.309508.com-新三d福彩合法吗| www.448015.com-百彩仙子双色球专栏| www.41296.com-大丰彩票-|