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.33997r.com| www.si81.com-福彩3d走势图福| www.73dl.com-体彩断组杀-| www.3259.org-235彩下载-| www.22917.cc-新时时彩怎么玩法| www.73738.com-彩票平台二维码| www.036523.com-彩宝贝杀号-| www.214267.com-人人买彩票靠谱吗| www.295694.com-安徽快三今50| www.412385.com-彩票怎么卖-| www.554616.com-体育彩票知识大全| www.9944.com-莆田结婚彩礼| www.59973.com-助赢计划软件分分彩| www.082013.com-彩宝网官方网址| www.150168.com-手机彩票投注| www.289281.com-5分彩官网-| www.388607.com-彩票代销违法吗| www.513792.com-彩票榜网址-| www.584762.com-玩彩彩-| www.666939.com-体彩超级大乐透| www.751443.com-淘彩票官网下载| www.835187.com-韩版好彩香烟| www.0335.date-幸运时时彩趋势图| www.33010.com-彩票被洗衣机洗烂了| www.87283.com-uu彩票app-| www.059122.com-快三群里的图怎么发| www.218268.com-五省快三一定牛预测| www.298852.com-贵州体育彩票快三| www.376875.com-彩宝贝彩票网官网| www.565878.com-台北快三开奖号码| www.650096.com-开机号中华彩票网| www.769650.com-福建好彩头-| www.865710.com-体育彩票好123| www.940818.com-台湾快三开奖结果| 福利彩票www.8039o.com| www.fo08.com-广西福彩快3结果| www.yd33.com-好彩网是骗人的吗| www.47ce.com-分分彩刷返点| www.1148.vip-世博大熊猫彩色银条| www.30353.com-京东彩票邀请码| www.87269.com-超级彩票专业户| www.079566.com-国外高频彩走势图| www.172608.com-大发彩app-| www.258047.com-2018网络售彩| www.327355.com-福彩神牛七乐彩预测| www.410140.com-嘉兴竞彩网点| www.16tv.com-秦皇岛福彩快三| www.2708.org-体彩7码最大遗漏| www.8501.shop-易彩娱乐注册账号| www.72694.com-新快三和值最大遗漏| www.072048.com-福彩关门-| www.144381.com-重庆彩全天计划| www.260029.com-288彩票正规吗| www.353865.com-福彩3d直播视频| www.445591.com-海南特区彩票论坛下| www.571050.com-彩票歌曲-| www.634891.com-七彩艺校怎么样| www.780288.com-如何申请卖福彩| www.858379.com-bb3d是黑彩吗| www.923117.com-郑州58彩票店转让| www.984563.com-亚博彩票真假问题| www.fn74.com-足球竞彩500| www.wv72.com-甘肃快三28号推荐| www.14vv.com-3d福彩怪字-| www.2580.me-守信彩票跟导师| www.9157.net-福彩三d天中藏机图| www.55818.com-七星彩奖表苹果版| www.062019.com-彩客网ios客户端| www.180005.com-体彩大乐透规则| www.256716.com-掌中彩安全吗| www.323793.com-七乐彩在线机选一注| www.397057.com-大远洋竞彩推荐| www.577966.cc-彩票近十期开奖结果| www.654924.com-58彩票苹果-| www.47530.com-贵州福彩兑奖中心| www.867167.com-查一下上期福彩号码| www.927186.com-我国的体育彩票是| www.89287.com-查看彩票用什么软件| www.038839.com-统一彩票一分快三| www.862609.com-七乐彩开奖时间结果| www.940234.com-吉林快三网站有哪些| www.984123.com-彩票99靠谱吗| www.w99.org-买彩票输好多钱想死| www.59nn.cc-大众彩票下载安装| www.0016.cm-属龙买彩票选哪些数| www.7077.top-七彩阳光信息| www.18418.com-快三应该如何推广| www.58793.cc-内蒙古福彩网下载| www.075560.com-达人彩票3d平台| www.189768.com-今天广西快三走势图| www.312853.com-最新彩票网站| www.434844.com-彩山特曲39度珍品| www.563229.com-中彩网彩票能提现吗| www.809593.com-众发彩票怎么注册| www.892069.com-足彩2串1中奖规则| www.958689.com-福利彩票网络投注站| 博乐彩票www.35918v.com| www.jx90.com-七星彩选号秘诀| www.d20.pw-彩票复式计算器下载| www.27rg.com-7意彩安卓版| www.0436.net-360专家彩票预测| www.6387.com-大象彩票开奖网| www.10226.com-足彩310走势图| www.49428.com-大乐彩走势图| www.88077.com-彩66骗局-| www.032235.com-彩票在线人工计划| www.105018.com-彩票计划中奖网| www.206514.com-彩票是否真有走势| www.312061.com-彩票红牛娱乐怎么样| www.399522.com-sk国际彩票-| www.642855.com-汪彩骗人的-| www.739653.com-炫乐彩票怎么样| www.805891.com-体彩刮刮乐最新票种| www.867728.com-手机摇彩票-| www.923833.com-6亿彩票下载| www.974632.com-大乐透众彩网| www.gf53.com-湖北彩票假球案| www.vd81.com-智慧彩票预测ios| www.00cz.cc-澳门十分彩预测| www.60gw.com-网上买彩票500| www.0029.pw-美国彩票兑奖| www.036623.com-3d通福彩下载| www.119503.com-发彩网是怎么赚钱的| www.204655.com-江西体彩中心电话| www.271903.com-易网彩票开奖查询| www.366559.com-福利彩票双色33期| www.444885.com-快乐彩规则和奖金| www.526317.com-天津时时彩手机开奖| www.617326.com-彩票赌大小反倍投法| www.676864.com-万彩吧六开彩奖资料| www.739824.com-福彩3d坑人-| www.800011.com-彩票qq群有没有拖| www.866146.com-5年信誉彩票| www.919218.com-快三走势图表格图片| www.972499.com-彩铅风景画大全| www.ec13.com-私人快三-| www.sq86.com-今天的彩票指南报| www.71.biz-彩泥制作大全小动物| www.84pl.com-北控京彩彩票新零售| www.1921.blue-时时彩三星4胆方法| www.6622.red-福彩好运中奖规则| www.09780.com-下载彩名堂计划| www.43638.com-福彩3d幸运鑫推荐| www.79630.com-彩吧图迷第一版总汇| www.022340.com-20选5彩票-| www.087029.com-鸿博彩票计划| www.135979.com-我想买彩-| www.199388.com-福彩快三遗漏数据| www.259244.com-福彩怎么选号| www.318564.com-福利彩票103期| www.374147.com-新彩吧正版彩图| www.659495.com-吉林快三春节几号停| www.731140.com-易彩快3官网下载| www.789090.cc-汇丰彩票app下载| www.849958.com-最好分分彩计划软件| www.899975.com-福利彩票站转让合同| www.954985.com-瑞彩祥云的幸运快三| www.997657.com-唐龙说彩今日3d| www.cp642.com-昨天快三开奖结果| www.ia53.com-竞彩容错投注说明| www.wd06.com-体彩店图片-| www.9no.com-如何购体育彩票| www.50tj.com-淘宝彩票不能买了| www.162.cm-五洲彩票娱乐注册|