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天

知道了
1分快三 www.959862.com-做兼职被骗玩彩票| www.018.tv-怎么关注老猫彩快讯| www.67989.cc-网络彩票输死怎么办| www.108708.com-七星彩是否中奖查询| www.581223.com-福彩3d今天开奖| www.8809.live-时时分分彩开奖号码| www.732230.com-七乐彩去哪里兑奖| www.863854.com-彩票开奖今晚结果| www.967914.com-西安福彩-| www.cai8277.com河北省快三玩法说明| www.306311.com-高频彩票贴吧论坛| www.171166.com-广西快三中奖规则| www.321898.cc-南南国七星彩票论坛| www.412292.com-福彩3d走透图| www.525494.com-黑彩能赢吗-| www.619546.com-彩票筛选器app| www.693301.com-96彩票下载-| www.778048.com-体彩七位数游戏规则| www.654253.com-哪里有假彩票卖| www.730993.com-彩票套利平台| www.773607.com-福彩幕后的老总| www.8074.me-水彩大师约瑟夫| www.62621.cc-雪园缘足彩比分直播| www.2mk.com-极彩色-| www.27ej.com-如何找分分彩的漏洞| www.469214.com-新名彩乃-| www.597032.com-吉林快三形势走势图| www.729753.com-恶搞彩票中奖生成器| www.853355.com-美国彩票mega| www.951973.com-彩天下会不会是骗局| 博乐彩票www.35918g.com| www.sf95.com-北京时时彩分析软件| www.84wr.com-分分彩五分彩| www.6340.cm-在网上怎么购买彩票| www.25708.com-巨彩彩票jc-| www.732695.com-佰万彩票注册| www.511268.com-豪亨博彩票k5网址| www.359.live-彩票奖池-| www.8559.net-国家福彩中心官网| www.87264.com-福彩3d大神-| www.234057.com-福彩3d复式投注表| www.324783.com-马来西亚博彩| www.6517.xyz-三分彩吧-| www.148916.com-38彩票-| www.236483.com-竞彩足球比分360| www.315797.com-彩虹5无人机首飞| www.922922.cc-玩体彩能赚钱吗| www.5fc.cc-彩乃奈奈中文百度云| www.193643.com-马来西亚福利乐彩票| www.283838.com-吉林快三走图| www.365302.cc-12彩票安卓版| www.1yd.cc-彩色激光打印机好吗| www.71gx.com-时时彩牛牛开奖结果| www.967941.com-西安宝马彩票案始末| www.829716.com-连中彩票官方网站| www.981865.com-分分彩平台注册| www.br09.com-至尊快三-| www.vz30.com-贵州彩票中心软件| www.29ih.com-体彩网手机版| www.61175.com-旧版爱乐透彩票图表| www.616638.com-云顶国际博彩怎么样| www.733854.com-九亿九彩票-| www.842225.com-福彩资金分配比例| www.922991.com-彩票店开业-| www.886753.com-微信中国彩国际彩票| www.829862.com-一彩仓库软件| www.2612.biz-乐购彩票内部邀请码| www.51081.com-外国彩票10钟开奖| www.053087.com-彩票出概率吗| www.172455.com-快三开奖结果江苏| www.836139.com-顺丰彩票app下载| www.924805.com-中国福彩新玩法| www.983410.com-彩16怎么下载地址| www.318411.com-彩票app买彩禁止| www.381277.com-澳门福彩24小时| www.957140.com-金利彩票是黑平台吗| 中彩网www.71233y.com| www.804955.com-搭建彩票平台查获| www.883288.com-鸿彩网可靠吗| www.954666.com-今晚体彩开什么| 彩客博www.8667y.com| www.82330.cc-怎么去兑彩票大奖| www.ab70.com-武汉快三查询| www.527258.com-新时时彩的开奖结果| www.903725.com-9万彩票安装到手机| www.66fn.com-星游时时彩官网| www.262549.com-彩九app最新版| www.77709.com-黑苍蝇彩报-| www.618142.com-福彩中的幸运彩| www.87247.com-超级彩票代打| www.136351.com-注册送彩金的网站| www.233931.com-快三游戏是啥意思| www.316585.com-乐彩论17500坛| www.398913.com-七星彩论坛南国| www.527393.com-中彩网双色球讨论区| www.654326.com-彩之源官方平台| www.726520.com-优秀教师彩铅画作品| www.796182.com-印尼分分彩官网| www.872119.com-福彩投注订单助手| 彩票驿站www.2350i.com| www.ha5.com-玩彩胆神-| www.744386.com-竞彩倍投计划骗局| www.27011.com-两元彩票下载| www.cp1010.com-快三网赚-| www.099751.com-彩票首充50送彩金| www.206612.com-内蒙古快三选号玩法| www.295349.com-快开型彩种走势技巧| www.374911.com-246123天好彩| www.786718.com-甘肃福彩3d藏机图| www.854254.com-福彩旗下的高频彩| 通盈彩票www.567620.com| www.nn46.com-竞彩篮球投注app| www.594554.com-好彩客v111网| www.548421.com-易彩3的规律| www.e20.com-百度乐彩彩票软件| www.262026.com-玩快三输了好几万| www.399233.com-海南七星彩坛论| www.532477.com-临沂福彩-| www.633332.com-篮彩单场-| www.247023.com-彩票分析师软件| www.329835.com-中国彩吧红五图库| www.496809.com-即时彩是什么意思| www.9983.in-彩妆批发进货渠道| www.27587.cc-500彩票计算机| www.67rx.com-彩票中奖去哪领取| --湖北福利快三预测| www.xj95.cc-福彩3d彩乐论| www.83tx.com-天彩粮肉夹馍加工| www.026371.com-海南私彩平台| www.751555.com-手机彩票怎么停售了| www.570062.com-十分快三致富彩票| www.585789.com-玩彩票能赢钱吗| www.303201.com-乐彩论坛3d达人| www.950590.com-下载个乐彩网| www.296594.com-彩专家人工定胆计划| www.421062.com-足彩金手指曰报| www.574338.com-国外数学家买彩票| www.670026.com-海南彩票之王争霸赛| www.758368.com-彩票999官网下载| www.840913.com-彩票中奖是给支票| www.934858.com-快彩软件-| www.997800.com-体彩单场竞猜| www.ml52.com-好彩网论坛实力三肖| www.98466.com-腾讯分分彩近五百期| www.nm05.com-快三赌博犯法么| www.319179.com-算局七星彩下载| www.517855.com-三分半快彩是什么| www.952141.com-时彩app-| www.990744.com-有人用澳客赢家彩票| www.cp7576.com-彩铅画-| www.of53.com-福彩开奖结果3d| www.091878.com-实亿国际是黑彩票吗| www.592868.com-彩虹七号在哪下载| www.283411.com-七乐彩怎么中奖规则| www.o02.cn-玩彩票怎么规划本金| www.023132.com-大陆彩票-| www.008252.com-当天全部彩票开奖| www.129925.com-234彩票平台| www.230045.com-567cc彩票下载| www.q03.net-福彩3d777彩报| www.17673.com-中国足球体育彩票网| www.062639.com-鸿运彩app-| www.163922.com-足彩容错怎么算| www.241322.com-彩票七星彩怎么玩法|