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天

知道了
亚洲28 www.1893.com-火箭体育彩票网址| www.11112.com-8k彩票是骗局吗| www.55189.cc-台湾时时彩官方首页| www.99383.com-福利中心彩票主任| www.087019.com-手机版乐福彩票| www.181462.com-上上海快三开奖结果| www.297956.com-体育彩票店布置图片| www.466117.com-高频彩官方网| www.600197.com-不买彩票还想着中奖| www.688867.com-105彩票本地应用| www.773335.com-足彩赔率计算公式| www.998541.com-广州福彩站-| www.cd14.com-福彩3d今天的奖号| www.vj66.com-5分彩官方网站| www.05ds.cc-国外彩票开奖| www.68af.com-网易彩票真实性| www.0701.vip-福利彩票申請| www.23755.cc-福彩3d直选技巧| www.70999.cc-腾讯五分彩真实吗| www.073886.com-财神8彩票网可靠吗| www.146610.com-福彩3d走势图首页| www.249338.com-福彩20分-| www.329038.com-免费送彩金无需申请| www.405503.com-广西彩调-| www.515795.com-家庭彩票官司大战| www.589301.com-竞彩篮球投注规则| www.665385.com-网上代竞彩体育| www.741888.com-购彩堂软件-| www.816871.com-众彩网手机版怎么样| www.893783.com-49彩票com-| www.963287.com-福彩块3分布走势图| 天下彩www.436106.com| www.ix72.com-原体彩中心副主任| www.e83.club-今天福彩直播开奖| www.42mm.com-小猫彩铅-| www.571.org-福彩开奖资料大全| www.4529.org-第19035期体彩| www.27153.cc-新彩票论坛手机版| www.003840.com-彩之源彩票邀请码| www.392949.com-眼睛手绘图片彩铅画| www.619668.com-打彩票图片大全| www.692786.com-乐乐彩真的假的| www.774147.com-7乐彩复式中奖规则| www.918112.com-3d图3d彩票-| www.977630.com-世界杯网上购彩| www.uy97.com-人人彩票是真的吗| www.10bs.com-1235cc彩票-| www.81be.com-蚂蚁金服彩票| www.1802.org-黑客修改私彩数据库| www.10944.com-南京市省体彩中心| www.53842.com-时时彩票后三组六| www.97567.cc-山东彩礼排行榜| www.061243.com-5a彩票网真的假的| www.172327.com-极速快三必出码技巧| www.256121.com-快三和值跨度图| www.327215.com-体彩七位数几点开| www.397790.com-九万彩票网页版| www.536902.com-香港中彩网投| www.618146.com-陕西体彩中心位置| www.686121.com-500万彩票计划| www.764730.com-33彩票安卓版| www.869367.com-七星彩购买-| www.948342.com-福彩发行时间| www.999160.com-福彩3d彩图大全| www.ja7.cc-广西体彩-| www.og51.com-河南省福彩中心| www.3en.com-福彩派奖-| www.55rf.com-山西十一选五体彩| www.899.website技术型彩民中奖技巧| www.5099.org-鸿运网快三规律破解| www.03423.com-彩票222-| www.77644.cc-手机贴彩膜多少钱| www.026903.com-福彩平台投注刷佣金| www.098993.com-快三彩票怎么下载| www.162009.com-彩乐汇是什么东西| www.276060.com-七乐彩复式价格表| www.358397.com-中国彩票大王杨光华| www.441365.com-体彩限售-| www.529640.com-体育彩票浙江6+1| www.629964.com-竞彩足球强胆推荐| www.697119.com-时时彩玩法-| www.772009.com-横沥东方亮彩| www.872231.com-中港澳彩票-| www.939237.com-d9彩票下载安装| www.989407.com-彩票兼职投注给账号| www.of.cc-宁夏福彩快三72期| www.nh58.com-彩客网完场比分| www.1oi.com-合肥体彩店转让| www.52jq.com-足彩31o走势图表| www.662.cm-时时彩网站制作| www.4336.cn-异地彩票中奖| www.9347.loan-武汉福彩中心总部| www.67331.com-捡彩票中奖不协商| www.022151.com-神州彩票方下载| www.091476.com-703彩票链接| www.176300.com-安徽福彩快3走势图| www.276712.com-分分快三是骗局吗| www.370928.com-彩铅画花卉教程图解| www.519234.com-家彩搜索家彩开奖| www.791410.com-福利彩票名字选号器| www.865667.com-体彩32期-| www.950773.com-福彩三地跨度走势| www.990369.com-多乐彩票骗人| www.cp119.com-吉林快三平台搭建| www.kd79.com-盐城人彩票中两个亿| www.a33.com-一分彩7码公式| www.22mb.com-k8彩票网注册登| www.876.xyz-福彩3d试机干嘻| www.4398.cn-中国福彩安卓版下载| www.9193.loan-手游彩重新启动| www.73875.com-网络体彩-| www.020903.com-精彩十分彩票玩法| www.085053.com-900彩票苹果版| www.139414.com-共享彩票靠谱吗| www.212362.com-永盛彩票平台| www.278148.com-稳赚高频快三娱乐| www.468379.com-刮刮乐彩票中奖图片| www.548988.com-自己玩彩票犯法吗| www.658041.com-单场足彩奖金计算器| www.735646.com-体彩大乐透中奖诀窍| www.801373.com-百胜快3彩票| www.860965.com-中国福彩算胆工具| www.908876.com-福彩开机号码| www.967567.com-体彩大乐透选号大师| www.hv95.com-北京福彩中心| www.xd25.com-快三走势图怎么看透| www.10yy.com-时时彩有合法| www.71oy.com-彩票正能量的句子| www.0662.wang-三十选七七乐彩| www.8673.biz-好运来时时彩小助手| www.35675.cc-彩99旧版本安卓| www.76899.cc-优彩彩票输了几十万| www.022072.com-购物送彩票合理么| www.085407.com-百赢快三是真的吗| www.137277.com-五彩冰淇淋-| www.202926.com-广东福彩有快3吗| www.266017.com-娱乐快三走势图| www.396404.com-彩虹简笔画图片大全| www.506189.com-好彩在线登录| www.566044.com-599易彩堂-| www.624899.com-香港彩富网官方网站| www.682632.com-高频彩票官方网站| www.750027.com-快三私彩-| www.807788.cc-玩彩票大平台wcp| www.871656.com-足彩过滤软件app| www.980423.com-彩票彩经网-| www.cai0977.com安徽快三开奖是多少| www.hn16.com-足彩十四场对阵表| www.wf55.com-河北冀彩宝投注大厅| www.00ab.cc-用彩虹句子说说心情| www.54vq.com-福彩3d3d村杀号| www.495.gg-微信没有福利彩票| www.3188.top-中彩手彩票官方下载| www.7781.loan-皇室彩票兼职| www.17813.cc-香蕉计划竞彩拉人| www.52923.cc-好彩网七乐彩期预测| www.87748.com-怎么戒掉网上玩彩票| www.028841.com-浙江体彩十一选五| www.092122.com-乐发彩票app| www.142174.com-彩票杀龙什么意思| www.203318.com-彩神ⅴ-| www.259237.com-今天快乐双彩开奖| www.319771.com-易彩彩民注册| www.374655.com-体彩试机号快报|