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.6954.shop-竞彩收米-| www.8668.vip-体育7星彩票开奖| www.116215.com-彩票走势图500网| www.570196.com-皇都彩票讨论群| 500彩票www.401282.com| www.33gv.com-好的足彩篮彩推荐| www.271038.com-彩票77app-| www.407667.com-中国福利彩票应用| www.555933.com-红彩会登录888| www.629088.com-88爱彩登录-| www.763046.com-宁波足彩团队招聘| www.868365.cc-7星彩走势-| www.974409.com-28彩票平台注册| www.sv41.com-彩票33官网安卓| www.738115.com-体彩18027五d| www.232162.com-旺彩社区-| www.668389.com-国外彩票工作| www.940995.com-分分快三怎么样| www.cp1.link-贵州福彩助手| www.iz40.com-体彩下载官网app| www.061.cm-体彩中奖人员名单| www.188049.com-北京快三开奖结果查| www.126847.com-福彩三第开奖| www.563388.com-彩票60秒官方网站| www.890153.com-赢彩计划下载安装| www.fe22.com-广东体育彩票| www.628195.com-彩盈下载安装| www.751444.com-中彩网老版电脑版| www.954932.com-相亲彩票诈骗套路| www.t52.org-湖北彩票造假| www.7764.cm-九度彩票是骗局吗| www.166721.com-一分快三破解器| www.502318.com-80选20彩票规律| www.975645.com-未婚先孕彩礼怎么谈| www.94gr.com-中国彩吧论坛中| www.896734.com-分分彩手机挂机平台| www.gl8.com-时时彩改时间| www.72960.com-优彩网彩票优惠券| www.967994.com-宁夏体彩新11选5| www.268960.com-长城福彩-| www.225507.com-彩票选好选几个| www.586560.com-易彩时评网址| www.713761.com-体育彩票纸的尺寸| www.130764.com-黑马团队彩票| www.212927.com-私彩官方如何作弊| www.289408.com-北京快三站点| www.359900.com-彩票数字区间| www.439003.com-游戏机彩票机故障| www.526983.com-时彩平台下载| www.17567.cc-网赌时时彩的套路| www.91997.cc-足彩过滤软件| www.131876.com-潍坊彩礼钱的价格表| www.37571.com-福利彩票多久没中了| www.52397.cc-英超足彩网-| www.956936.com-网络彩票赌博害死人| www.hq69.cc-福彩迷快3-| www.0349.cn-彩20下载到手机| www.593293.com-彩虹6号多少钱的好| www.675608.com-今日体彩中奖号玛| www.756696.com-全民彩票注册网站| www.826382.com-体彩扑克牌技巧保盈| www.900151.com-彩票网上兼职赚钱| www.962954.com-3d排列三彩票软件| 吉利彩票www.80075u.com| www.420299.com-体育彩票室内装修| www.700922.com-体育竞猜彩票结果| www.925984.com-负责任的彩票| www.jd7.com-彩票平台刷流水骗局| www.568056.com-快乐彩票三黑网站| www.895031.com-投资彩票赚钱靠谱吗| www.ae92.com-6491彩票资料| www.74543.com-完美彩票平台注册| 好彩头彩票www.23579c.com| www.81758.com-时时彩上岸-| www.323813.com-七乐彩机选一注号码| www.853877.com-万彩动画大师破解| www.428571.com-一分一期的彩票| www.6sp.cc-赠送福利彩票| www.5297.biz-江苏体彩排五号码| www.914874.com-彩票软件被骗能报警| www.fc97.com-彩票害人-| www.560952.com-彩票在五行属什么| www.626455.com-福彩彩票图片大全| www.688049.com-玩时时彩犯法判刑吗| www.753236.com-633彩票-| www.815975.com-网络博彩报警有用吗| www.882717.com-全国彩礼排行| www.941376.com-福彩7乐彩开奖号码| www.982111.cc-577彩票计划| www.pv2.com-我想买彩票怎么买| www.861103.com-好彩2中奖奖金多少| www.gg63.com-日彩网快三是合法的| www.415.xyz-手机可以买七星彩| www.758236.com-长春彩溢健康浴场| www.4927.vip-体彩7星彩开奖查旬| www.011062.com-国家体育彩票电脑版| www.219085.com-建筑工地彩钢围挡| www.34878.com-购彩v下载-| www.277817.com-福彩预测图-| www.053957.com-福利彩票店怎样选址| www.9478.vip-31选七体彩走势图| www.876977.com-彩票是怎么玩的| www.956027.com-今天3d彩票开奖号| 500彩票www.26299j.com| www.949197.com-体彩大乐透走势图图| www.509308.com-财神网彩票网| www.678695.com-足彩必发指数500| www.656137.com-福彩3d24和值| www.932666.com-彩钢围挡生产机器| 彩乐乐www.cll168.com| www.c91.cn-老彩票-| www.1766.in-51中彩彩票下载| www.06722.com-福彩3d两码和查表| www.045208.com-河南快三中奖助手| www.060460.com-私彩犯法-| www.504987.com-送彩金彩票网址大全| www.592619.com-航天九院彩虹无人机| www.276579.com-彩之源彩能不能赚钱| www.741707.com-南京有快三吗| www.854322.com-彩票诈骗怎么判刑| www.305561.com-3980元彩票-| www.398857.com-大成彩票是什么网站| www.891329.com-彩票励志广告语| www.953659.com-香港的福彩-| 天天彩票www.54968g.com| www.813478.com-新浪体育竞技彩票| www.888387.com-彩95app-| www.63hq.com-黄金换彩金会不会亏| www.949780.com-南方彩票app| www.7998.xyz-海南彩票开奖号码| www.301121.com-昨天福彩出什么号| www.470000.com-境外足彩推荐网站| www.cl12.com-浙江快三查询结果| www.9171.org-娱乐彩注册-| www.721553.com-七星彩内部精准码| www.933192.com-2468天天开彩| www.56dg.com-福彩3d的谜语出来| www.684900.com-牛彩网字谜汇总大全| www.018540.com-赢彩彩票靠谱吗| www.175870.com-快三赚钱-| www.328245.com-港彩三中三高手论坛| www.543430.com-中华体彩彩报| www.632830.com-体彩猜球规则| www.752422.com-小彩牛彩票-| www.830851.com-彩易网下载-| www.898411.com-福利彩票拍照查询| www.979980.com-彩票开卖-| www.ai36.com-昨日彩票号-| www.794787.cc-最牛时时彩计划软件| www.924008.com-36元注册玩彩票| 中国福利彩票www.08588g.com| www.63466.cc-体彩5走势图带连线| www.10qi.com-央视点名彩票| www.387756.com-彩票每天几点停售| www.899665.com-幸运彩开奖-| www.a74.cc-官方正规彩种| www.947891.com-网上正规购彩平台| www.318465.com-幸运彩52xyc| www.956783.com-彩泥图-| www.46oz.com-cp90083彩票| www.3579.ren-南方双胆双彩| 天玺彩票www.296380.com| www.275957.com-福建体彩22选5| www.327732.com-酷彩吧app正规吗|