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.585037.com-天天足彩输了| 计划稳定版-dd彩靠谱不-| www.905432.com-丹麦足球竞彩| www.972116.com-彩票的有效兑奖时间| www.cp063.com-江西多乐彩开奖结果| www.4439.xyz-四亿彩票官方| www.502806.com-c语言体育彩票问题| www.665948.com-航天彩虹最新消息| www.756197.com-彩吧p3试机号| www.835630.com-顺丰丰彩-| www.908944.com-7c彩票-| www.975788.com-北京福彩电投小助手| www.el7.com-快三胆码投注技巧| www.sp54.com-e球彩历史数据| www.41aj.com-牛爹七星彩-| www.942264.com-彩96注册官网| www.cp1660.com-快三计划群高手群| YY彩票www.yy63.com| 众彩www.172346.com| www.xx69.cc-甘肃彩工网-| www.471168.com-私彩幕后控制| www.406986.com-9288彩票-| www.541999.cc-体彩走试图-| www.630515.com-新浪彩通开奖直播| www.739060.com-分分彩挂机怎么设置| www.815636.com-福彩排三今天开奖| www.881278.com-易彩票骗局-| www.946957.com-彩色混凝土怎么做的| 亿龍彩票www.1368c.cc| www.kw70.com-地区快三盈利| www.699607.com-辽宁3d福彩走势图| www.952248.com-福彩和值振幅走势图| www.pf57.com-5oo彩网-| www.738685.com-天津福彩机器申请| www.973926.com-易网彩票-| www.6mo.cc-彩票中的数学理论| www.979237.com-彩运网线路导航| www.739050.com-数字三彩神通安卓版| www.891106.com-彩票中奖提醒软件| 大赢家彩票平台www.068630.com| www.015815.com-唯彩专家预测| www.843881.com-体彩中心合同工| www.yg07.com-福利彩票胆拖计算器| www.531905.com-没有彩排过的戏| www.827888.cc-刷彩金赚佣金| www.345750.com-福彩3第牛彩摘彩网| www.482878.com-釉色和釉彩的区别| www.562635.com-彩吧论坛静态版| www.672155.com-懂彩宝双色球预测| www.ku65.com-上海福彩网实时查询| www.551427.com-新浪足彩佬牛| www.130843.com-长沙体彩中心| www.828906.com-彩票公司抓了多少人| www.875961.com-今日吉林快三开奖| www.954641.com-彩票宝彩票网| 大众彩票www.923887.com| www.qp09.com-彩809彩票-| www.22ne.com-唯彩会彩票开奖查绚| www.446954.com-今晚竞彩比赛直播| www.261043.cc-尊彩app-| www.801138.com-福利彩票开奖玩法| www.271321.com-好彩香烟怎么订购| www.dh23.com-七乐彩胆拖玩法介绍| www.54hu.com-彩81彩手机版| www.129421.com-彩票字谜图谜| www.00787.cc-开体育彩票店申请书| www.gd21.com-彩库宝典下载| www.xu23.com-彩票什么号才能中奖| www.32uf.com-彩票哪年发行| www.438490.com-陕西省体彩兑奖流程| www.990163.com-u9彩票网谁提过现| www.nf66.com-彩99下载-| www.42rt.com-苹果6sp原彩显示| www.rx11.com-安徽省福彩中心地图| www.607952.com-彩友多平台下载| www.370758.com-宝钢彩钢瓦价格| www.e46.org-百度乐彩下载| www.58779.cc-下载体育彩票开奖| www.185472.com-分分时时彩稳赚技巧| www.yz67.com-河北福利快三开奖| www.iv79.com-e球彩总进球数开奖| www.16hq.com-幸运彩河南福彩| www.83hs.com-彩经网过滤-| www.1871.com-彩46app下载| www.69fm.com-彩票走试图首页| www.933768.com-做私彩app犯法吗| www.861170.com-彩票开奖结果公布| www.947378.com-全国彩吧-| www.993839.com-新浪彩票19006| www.mq2.com-江苏快三推荐和值| www.te71.com-时时彩3星稳定做号| www.40uc.com-唯彩会官网首页| www.756.hk-时时彩猜数字怎么猜| www.t33.top-七乐彩试机号开| www.4956.vip-933彩票是否合法| www.783978.com-105官网彩票下载| www.853694.com-微信彩票平台| www.909081.com-澳门生肖彩网址| www.967361.com-微信彩票群揭秘| www.xt98.com-买彩票中200诀窍| www.291109.com-一分快三大小怎么玩| www.ue97.com-凤凰私彩平台官网| www.f11.cc-七星彩开奖信息网易| www.07eq.com-梦幻彩铅画手绘| www.365937.cc-彩票29平台-| www.33048.cc-专业玩彩个人网| www.821170.com-时时彩单期计划网站| www.4179.biz-龙江网络七彩云投屏| www.22fr.com-怎么分彩票大透| www.301921.com-7星彩走势图综合| www.432357.com-体彩领奖到哪里领取| www.592030.com-安装七星彩开奖结果| www.710157.com-大乐在线机选彩乐乐| www.954616.com-足彩精通-| 中彩网www.71233m.com| www.cx61.com-福彩3d试机和金码| www.vl51.com-彩票开奖i-| www.733336.com-华夏彩票代理| www.186771.com-中彩网网址-| www.080845.com-体彩篮球cba竞猜| www.416400.com-uc彩票平台怎么样| www.504987.com-送彩金彩票网址大全| www.604569.com-九千万彩票邀请码| www.667223.com-体彩真能中奖号码| www.750025.com-吉林快三算号| www.827861.com-彩票跟单师-| www.880759.com-体彩排列三中奖情况| www.954051.com-足球竞彩官网| 网易彩票www.078wy.com| www.222349.com-易彩快三辅助| www.667753.com-中彩票几率高吗| www.576746.com-二四好彩免资料大全| www.692878.com-乐乐彩票赌博| www.978823.com-贵烟好彩多钱一盒| www.394988.com-七彩铃兰花语| www.129.biz-请播放彩虹的约定| www.16666.com-最新竞彩足球网站| www.5860.org-中国体育彩票排五| www.2200.org-福利彩票贴吧交流| www.8476.cc-亿彩彩票代理合法吗| www.72720.cc-福彩3d开奖统果| www.055034.com-福彩三d的网站| www.318067.com-福彩开奖日是哪几天| www.378587.com-彩乐园彩票走势图| www.934707.com-利盈国际时时彩平台| www.976794.com-安徽福彩快3遗漏| 多乐彩票www.466161.com| www.528352.com-分分快三怎样能稳赚| www.598601.com-我乐时时彩计划官网| www.680281.com-网易彩票中奖不承认| www.737559.com-福彩3d幸运码闪退| www.791785.com-梦想彩票登陆网| www.850309.com-腾讯5分彩官网| www.936171.com-够力七星彩奖解梦| www.980444.com-彩铃下载免费| 幸运彩票www.982799.com| www.538845.com-澳洲时时彩-| www.230403.com-3d彩民预测-| www.327957.com-彩投彩票网-| www.440734.com-重庆时彩怎样看走势| www.zz74.com-七乐彩开奖号| www.719326.com-双色球彩票开奘结果| www.583458.com-西安市体彩中心兑奖| www.920955.com-北京福彩网快三|