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.01258.com-足彩完整比分直播| www.75699.cc-申航彩票骗局| www.025628.com-7乐彩开奖-| www.089506.com-台北快三有什么规律| www.153061.com-中国体彩生肖| www.222721.com-湖北快三全天计划网| www.292987.com-林竹福彩高手一码| www.515179.com-七星彩三字现概率| www.027633.com-体彩31选7-| www.194593.com-重庆时时彩骗局| www.361396.com-3d体彩中奖号| www.506043.com-明天快三有豹子吗| www.618405.cc-中博彩票注册邀请码| www.738807.com-彩神争霸1下载| www.864100.com-网络骰子彩票技巧| www.45666.com-拉萨福彩快3图分析| www.119827.com-全球彩坑人不| www.695888.com-合肥彩票店加盟| www.648.live-今福利彩票开奖号码| www.057383.com-中彩网快3走势图| www.322350.com-足彩8串1好中吗| www.716835.com-彩铅画满天星| www.860345.com-河内时时彩官网| www.00dm.com-描述彩虹的优美句子| www.4274.cm-彩票大小数规律| www.67034.com-彩票中奖符是真的吗| www.220621.com-幸运快三下载安装| www.500365.com-彩票发帖-| www.685342.com-福彩3d万能4码| www.337754.com-购买江苏快三app| www.552267.com-下载万彩看开奖| www.725287.com-中国彩票与赌博| www.6mh.com-9f彩票挂机软件| www.gt20.com-快三助手ios| www.97pn.com-天悦体彩哪个公司的| www.17703.cc-胜负彩彩果-| www.057118.com-七星彩开什么奖| www.526230.com-篮球彩票开奖结果| www.896215.com-内蒙休彩十一选五| www.dx53.com-易彩集团app| www.37qq.com-快三赔率是多少| www.3292.win-福彩查询双色球开奖| www.376398.com-安徽体彩十一选| www.686642.com-600w彩票网网址| www.869182.com-巨丰彩-| www.981732.com-567彩票靠谱吗| www.k10.org-彩票投资指南电子版| www.110.vip-河内彩后二技巧| www.08140.com-体彩竟彩打票教程| www.035048.com-优惠大的彩票平台| www.228801.cc-广东好彩3玩法| www.407797.com-七星彩老鼠精图版| www.611811.com-长春彩溢关门了吗| www.837749.com-乐彩33怎么注册| www.46sz.com-955彩票平台| www.6675.cm-宛田彩调班-| www.55977.cc-七星彩期开奖结果| www.051661.com-九万彩票经典版| www.64403.com-彩票中奖顺口溜| www.092345.com-江苏快三精准计划表| www.268629.com-掌上彩-| www.445088.com-咸阳彩票店转让| www.640558.com-麦久彩票网孟德| www.828009.com-下载彩票机选大全| www.75fm.com-北京单场竞彩推荐| www.8390.vip-赢彩彩票咋样| www.78977.com-七乐彩尾号-| www.142946.com-竟彩258-| www.291153.com-福彩3d五行图| www.308396.com-中福快三是哪里出的| www.605081.com-体彩胜负彩好中奖吗| www.877794.com-福彩3d三毛全图| www.fm6.com-重庆时时彩已下架| www.22oo.cc-6和合开彩结果| www.5885.cn-体彩三句话更新| www.85617.com-仙仙彩票-| www.179096.com-大发快三输钱的原因| www.447699.com-中央彩票公益金个人| www.vx37.com-上海快三遗漏结果| www.3679.xyz-彩票开奖彩票| www.89574.com-577彩票平台苹果| www.259169.com-竞彩平局特点| www.951574.com-红彩网络直播| www.t35.cm-湖北中奖彩票| www.77738.cc-彩尊国际手机版下载| www.215666.com-360彩票中心首页| 亿彩www.6832t.com| www.11sq.com-彩色的翅膀-| www.14006.com-彩客网中国竞彩| www.108885.cc-彩票越玩越输| www.539942.com-体彩直选三-| 顶级娱乐www.687198.com| www.6636.org-七星彩抓规律神器| www.007825.com-zucp福彩体彩| www.221814.com-修改时间差玩时时彩| www.642998.com-快三和值11可能| www.760267.com-彩神uv打印机深圳| www.973125.com-凤彩网彩票网| www.7np.com-彩铅食物手绘简单| www.79556.com-福彩3d折线图正版| www.315179.com-福彩7乐彩-| www.983930.com-中彩网3d预测专家| www.61wz.com-彩票开奖双色球| www.5857.com-跑狗玄机牛蛙彩票| www.017954.com-网络彩票投注软件| www.824729.com-红旗团队时时彩计划| www.d14.net-软件彩票-| www.5701.cm-韩国彩票中奖者| www.094558.com-开发个彩票软件| www.090676.com-陕西省福彩网| www.263570.com-模拟竞彩-| www.465268.com-美国彩票漏洞| www.629095.com-山东福彩七乐彩| www.47qh.com-体彩大乐透怎样对奖| www.059277.com-三d玩彩老头预测| www.286347.com-江苏体彩官网首页| www.858792.com-全天二分快三计划| www.162149.com-大运彩票怎么玩能赢| www.36763.cc-双色球和体彩区别| www.388384.com-天天爱彩票竞彩| www.751914.com-一号店彩票官网| www.968015.com-西安宝马彩票造假| www.945329.com-福彩图标图片| www.780211.com-彩铅星空画教程| www.812567.com-百度快乐彩走势图| www.912910.com-0818彩票骗局| www.57712.com-彩票程序告别死工资| www.76um.com-双色球神彩飞扬预测| www.11962.com-福利彩票数字3单式| www.2004.in-体彩排列三活动| www.659554.com-境外足彩平台| www.oc25.com-河南快三即时走势图| www.277666.com-魔方彩票可靠吗| www.456994.com-广东福彩3d开奖| www.576181.com-正版资料丨牛蛙彩票| www.296157.com-大发彩票合法吗| www.854476.com-酷彩网快3-| www.156531.com-香港五分彩骗局| www.533583.com-七星彩会作弊吗| www.345214.com-天天彩票浙江| www.673359.com-我要今天的彩票| 500万彩票www.www.98528f.com| www.84217.com-七星彩解梦-| www.957920.com-足球彩票兑奖规则| www.ra.com-甘肃福彩快3| www.l37.org-下载福彩app| www.59kx.com-什么彩票能中五百万| www.0278.net-时时彩判断下期组六| www.789078.com-足球竞彩投注app| www.083731.com-福利彩票下期预测| www.331926.com-大发快三刷流水方法| www.981857.com-七星彩电脑版| www.823108.com-福彩3d研究方法| www.927605.com-中华彩票app下载| 福彩www.15355j.com| www.jo90.com-网络刷彩是什么| www.00uo.com-彩票缺了一个小角| www.01988.com-至尊彩网站-| www.30mr.com-彩虹岛梦噬-| www.p29.org-广西福利彩开奖结果| www.823314.com-彩涂基板-| www.251785.com-福彩15选5派送奖| www.003441.com-网上有卖体彩的吗| www.240979.com-彩库宝典官方正版下|