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.gw5.cc-安徽快三预测推荐号| www.w42.com-好彩频道回放| www.1926.vip-时时彩单式500注| www.5816.me-竞彩购买-| www.fp97.com-北京快3福彩app| www.907127.com-福彩省份快三靠谱吗| 亿彩彩票www.588yc.com| www.ju28.cc-彩票计划软件下载| www.561080.com-久游彩票平台半厘| www.038707.com-彩票赚钱软件排行榜| www.190333.com-一分快三走势怎么看| www.9167.online七色彩虹糖图片| www.826056.com-快三多少钱一注| www.928508.com-俄罗斯彩票大奖号码| 新盈彩www.xinyc8.com| 博乐彩票www.35918k.com| www.uw84.com-广西体育彩票| www.31ur.com-19号彩票开奖结果| www.121710.com-海南七星彩最准直码| www.063639.com-时时彩有多少网站| www.ik48.com-彩票中奖了-| www.k12.shop-好彩网首页3d字谜| www.060771.com-附近体彩销售点| www.144188.com-nba竞彩篮球预测| www.45200.com-福彩如何刷销售额| www.99774.com-网络彩票提现失败| www.509328.com-39彩票怎么样| www.586777.com-卓易彩票一亿不认账| www.659249.com-彩票开奖3d开奖| www.738702.com-静海福彩中心| www.566068.com-彩仙阁软件官网| www.173979.com-江苏快三开奖时间| www.8659.org-体彩排列三开奖信息| www.207870.com-49彩票平台-| www.65922.com-排三彩经网杀号定胆| www.198974.com-福彩3d玩发-| www.289816.com-澳客彩票苹果版| www.369601.com-新版87云彩店| www.840044.com-极速77彩票平台| www.918378.com-900彩票官网下载| www.983199.com-晨兴彩票骗局| www.by02.com-江苏快三开奖河北| www.700077.com-凤凰卫视无纸化彩票| www.770317.com-bb快乐彩技巧| www.862189.com-幸运彩彩票app| www.930178.com-十二生肖彩-| www.980811.com-彩票源码下载| www.cp7155.com-刷彩-| www.198771.com-大发快三体彩| www.0808.online分分彩刷钱技巧| www.67888.cc-福利三分彩开奖记录| www.551312.com-4场进球彩-| www.650154.com-海南彩票开奖号码| www.742909.com-免费彩金领取| www.820689.com-彩钢板门价格| www.886676.com-福利彩票奖金分配表| www.982912.com-彩票下载就送彩金| www.te8.com-官方彩种-| www.832902.com-买彩票机选容易中| www.980885.com-金彩网高手网彩票| www.ji68.com-吉林快三简介| www.2vj.com-完美彩票a-| www.210591.com-福彩极速快三| www.340118.com-买时时彩用哪个软件| www.519523.com-职业博彩人贴吧| www.589978.com-七星彩老鼠精版| www.670038.com-今晚七星彩开奖情况| www.840251.com-上海基诺型彩票| www.300011.com-123彩票开奖| www.6338.in-排列五私彩app| www.10517.cc-足彩单关中奖规则| www.657095.com-做梦梦见彩票号码| www.775460.com-吉林快三看和值技巧| www.098153.cc-福彩内部人员| www.6gj.com-手机投彩-| www.26054.com-彩虹形成的过程| www.73173.cc-长沙福彩大奖| www.i84.cn-一分快三在线计划网| www.72661.cc-电竞体育彩票| www.kw86.com-快三有多少省份| www.4kk.cc-体彩排五排五预测| www.62dp.com-彩票串码-| www.300799.com-七乐彩今日专家预测| www.564736.com-一个人领彩票| www.681818.cc-麒麟彩-| www.786982.com-竞彩足球单场预测| www.920808.cc-跨度3福彩号码| www.999961.com-10分彩是真的假的| www.gu86.com-彩票快三计划群| www.348834.com-彩599-| www.089051.com-分分快三怎么下载| www.50fv.com-快三职业彩民一天| www.955556.com-玩01彩票输的想死| www.402444.com-快三的概率-| www.547610.com-彩票开奖api源码| www.127289.com-小学彩铅画-| www.271532.com-好彩三复式-| www.389905.com-九江彩票店转让信息| www.556350.com-好彩彩票与你同行| www.648989.com-彩宝什么好-| www.ua97.com-快三怎么买最稳| www.121844.com-吉利时时彩开彩结果| www.130970.com-云彩在线彩票合法性| www.772645.com-七七彩票真假问题| www.371626.com-天彩粮集团骗局| www.788588.cc-竞彩篮球今日赛程| www.573.live-重庆桥洞彩票哥| www.609034.com-彩票店一天的销售额| www.325776.com-排3彩经网走势图| www.537440.com-彩色是颜色词语吗| www.868297.com-七星彩昨天的图纸| www.zk02.com-华夏彩票客户端下载| www.ig27.com-五百彩-| www.66757.cc-附近的彩票站| www.14613.com-七星彩生肖幸运选号| www.544568.com-淘彩彩票是真的吗| www.632123.com-网络时时彩害人| www.985407.com-凤凰时时彩官方网站| www.5227.me-福利彩票71-| www.873700.com-二个彩票平台对刷| www.948865.com-福彩3d和值推荐| 彩乐乐www.cll168.com| www.eh04.com-福建体育彩票论坛| www.sk80.com-新时时彩网址是多少| www.17897.cc-竞彩足球比分胜平负| www.079629.com-体彩飞鱼有规律吗| www.804112.com-那个网址可以买彩票| www.344900.cc-体彩早上销售时间| www.4288.cm-快2彩票-| www.73098.com-彩票返奖率-| www.0914.vip-福利彩票双色球杀号| www.87792.com-500万彩网首网| www.62242.com-三彩家官网-| www.60899.cc-新星彩宝-| www.213457.com-全部彩神软件大全| www.096013.com-彩票代打兼职违法吗| www.033784.com-如意彩票网注册| www.769362.com-好彩可免费下载| www.967481.com-彩票拖-| www.v92.net-1o5彩票网-| www.7cj.com-彩票3d周易独胆王| www.5224.top-如何申请福彩站| www.307536.com-彩友会app-| www.220440.com-彩票aqq-| www.cb84.com-288彩票平台下载| www.389646.com-怎么加盟体育彩票| www.te50.com-快三时时彩官网平台| www.458773.com-获取彩经网数据| www.624140.com-33彩票安全不| www.783609.com-cc分分彩有问题| www.925585.com-北京快三中奖助手下| www.ms16.com-k彩app下载-| www.446569.com-巨丰彩票正规合法吗| www.604075.com-关于对彩票的看法| www.774772.com-黄金8彩票网app| www.851630.com-重庆时时彩最近公告| www.971701.com-网上的时时彩合法么| www.dg31.com-深圳福利彩票彩种| www.566002.com-彩虹6号干员说话| www.66372.com-彩票七乐彩中奖规则| www.620701.com-什么是马彩-| www.722500.com-时时彩高手在民间| www.cai925.com-中国福彩快3开奖| www.089101.com-黑彩快三盘怎么申请|