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.465904.com-福彩3d胆码预测表| www.755514.com-大乐透下载旺彩网| www.277653.com-大平台彩票-| www.787677.com-排三绝杀六码彩经网| www.869789.com-唯彩会数字彩| www.392555.com-搜福彩票开奖结果| www.062293.com-虚拟足球e球彩技巧| www.5258.tv-中国彩票计划网| www.791785.com-梦想彩票登陆网| www.2322.com-下载彩88彩票| www.199074.com-山东体彩十一选五| www.957816.com-大发时快三网址| www.568484.com-重庆时时彩冷热新浪| www.901426.com-排列三预测众彩网| www.922381.com-约彩彩票手机软件| www.ym71.com-五和彩开奖结果| www.98zg.com-双色球谜语诗乐彩| www.8567.cn-七星彩开奖人是谁| www.252594.com-16234第一彩票| www.365584.cc-油性彩铅教程| www.473537.com-彩票快三视频| www.955168.com-博大彩票邀请码| www.hy43.com-彩票大底什么意思| www.05sx.com-蜡质彩铅用什么纸好| www.703342.com-福彩3d小助手软件| www.094093.com-买彩票上瘾人的心理| www.69533.com-老猫出彩快迅| www.5980.cn-彩票号码表格模板| www.973669.com-华彩娱乐登录| www.977533.com-世界杯足彩开户网| www.wh.com-彩票技巧规律| www.ti35.com-体彩试机号今天| www.45xm.com-m彩色香烟图片| www.0454.org-怎样找彩票平台| www.373286.com-伯乐彩票平台可信吗| www.211441.com-福彩甘肃快3下载| www.555124.com-坤彩科技同花顺| www.680936.com-七星彩被骗-| www.770049.com-绿好彩烟-| www.24642.com-彩铅画河流-| www.615408.com-四川福彩开奖信息| www.700933.com-买彩票算不算投资| www.799503.com-有彩金送的彩票网址| www.882019.com-彩票平台招聘计划师| www.953234.com-贵宾中彩-| 凤凰彩票www.5091a.com| www.og74.com-快三遗漏一定牛| www.342189.com-彩票256在线玩| www.093310.com-全部彩种免费计划表| www.2222.biz-微彩app注册| www.9465.shop-美国有哪些彩票| www.023530.com-谜彩软件-| www.y50.biz-vr彩票是黑平台吗| www.76hj.cc-兴华彩票下载| www.03192.com-35彩票怎么样| www.288157.com-购彩网主页-| www.0476.win-福彩廊坊鸿运预测| www.979938.com-快3彩票大全| www.uc59.com-全民彩票下载安装| www.1642.cn-澳洲3分彩开奖时间| www.113169.com-大奖彩票官网app| www.906979.com-山西体彩官网| www.975733.com-福彩快三专业版| www.jw.com-宁夏快三49期| www.qh03.com-黄好彩什么味道| www.13ow.com-怎样注册网上买彩| www.877325.com-马耳他共和国彩票| www.905762.com-网络黑彩处罚| GO彩www.gen00.com| www.zu45.com-七彩阳光体操视频| www.001.net-如何在百度关注彩票| www.997581.com-北京pk拾正规彩票| www.gq51.com-易彩快三计划1分钟| www.d18.net-中彩和体育福利| www.73xa.com-婚恋骗局重庆时时彩| www.3066.pw-四场进球彩开奖时间| www.9154.loan-七乐彩胆拖怎么投注| www.42963.com-968彩票登录| www.64604.com-好乐多彩票骗局揭秘| www.253785.com-分分时时彩正规吗| www.39796.cc-九彩彩票信誉| www.68337.cc-搜索3d彩报| www.21361.cc-彩争霸神8-| www.239762.cc-网络购彩-| www.369667.com-七乐彩封机时间| www.71612.com-快三黑客-| www.024240.com-福利彩票中3个号码| www.112149.com-彩票3亿-| www.525077.com-福建泉体彩音乐聊天| www.m33.pw-彩票11选五技巧| www.5708.vip-宋代三彩瓷-| www.22730.com-快三破解器下载苹果| www.61995.cc-七星彩开奖结果| www.509650.com-烟台彩票-| www.578717.com-体彩门牌-| www.678363.com-河北福彩开奖时间| www.759193.com-海南七星彩论坛规律| 彩天下www.196280.com| www.54870.com-晶彩靓颜祛斑霜| www.075177.com-中国那个彩票最靠谱| www.196100.com-幸运快三怎么看规律| www.355998.com-龙彩票app-| www.02jc.com-官骑彩-| www.783112.com-天天大奖彩票站下载| www.094708.com-什么是福彩刷流水| www.330354.com-大发快三qq群| www.050863.com-快三辅助软件| www.122350.com-中乐彩zlc-| www.eo51.com-北京快三投注大或小| www.853094.com-彩票中奖搞笑图片| 惠民彩票www.hm5522.com| www.287836.com-华夏亿成彩票| www.790321.com-彩票中奖恶搞生成| www.pk39.cc-彩票易中奖-| www.3187.cm-福彩三c开奖| www.355384.com-彩乃奈奈百度云图片| www.710698.com-彩钱三条什么意思| www.887518.com-网上黑彩票平台曝光| www.424163.com-中国星彩3d下载| www.29825.cc-查看福彩中奖结果| www.82843.com-惠州市福彩兑奖地址| www.4994.in-梦见彩票中奖| 大赢家彩票平台www.677375.com| www.535396.com-d35cc天空彩| www.lf18.com-好彩香烟多少钱一包| www.11at.com-彩娱乐彩票下载| www.4732.biz-龙珠彩票下载| www.93269.cc-竞彩让平负-| www.125674.com-七乐彩今天晚上开奖| www.273595.com-时时彩送彩金团队| www.820726.com-彩钢夹芯板耐火等级| www.888821.cc-四川体彩金7乐助手| www.947076.com-福彩体彩合并改制| 凤凰彩票www.77803y.com| www.9487.vip-彩钢夹芯板用在哪里| www.719461.com-福利彩吧助手| www.634249.cc-七彩阳光美术| www.690236.com-足彩带坐标走势图| www.751103.com-彩运8下载网址| www.802710.com-长沙最大彩票大奖| www.865020.com-彩票猜单双叫什么| www.913031.com-福利彩票中奖预测| www.972068.com-王者彩票真的吗| www.cp3398.com-河南彩票-| www.iy14.com-浙江体彩中心| www.vm90.com-快3彩票规则介绍| www.40.cc-幸运星座彩票网站| www.70642.com-彩票代玩真的假的| www.jr57.com-王者彩票可以挣钱吗| www.d65.club-123彩票平台网址| www.216960.com-快三正规平台| www.602653.com-彩票对折-| www.989008.com-彩票缴税地点| www.vq91.com-扫彩票查中奖| www.uw32.com-盈彩一分快三| www.zk11.com-038彩票手机登录| www.65711.com-彩吧图库第一版今天| www.21yd.com-福彩造假-| www.1223.net-下载全民彩票最新版| www.571103.com-牛彩网3d开奖结果| www.999497.com-大运彩票有赢钱的吗| www.8751.top-远途国际是黑彩吗| www.44224.com-体彩票上的字母数字| www.80172.com-北京快三预测技巧|