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.346630.com-谁有易彩票邀请码| www.746022.com-彩票复试奖金计算器| www.779114.com-天天彩票大小| www.1980.date-18彩票网首页| www.409958.com-体彩网站排列五下载| www.597927.com-足彩一等奖14场| www.230882.com-11选5购彩软件| www.868872.com-海南七星彩预测专家| www.952386.com-娜彩快开怎么样| 大玩家彩票www.9478f.com| www.900056.com-乐彩直播厅-| www.77so.cc-男朋友喜欢买足彩| www.51170.com-黑彩可以报警吗| www.5232.cc-足球派彩是什么意思| www.71106.com-福利彩票汽车游戏| www.839024.com-彩票回血导师| www.943046.com-703彩票骗局| 68彩票www.68682t.com| www.ip62.com-乐乐彩票是真假| www.b77.pw-80彩票是否正规| www.53230.com-举报万豪福彩| www.729102.com-好看彩票123网址| www.365132.com-彩票冷热号怎么看| www.465255.com-足彩随机买能赢吗| www.555463.com-快三一倍多少钱一注| www.622529.com-福彩双色球真实新闻| www.8501.top-亿彩靠谱吗-| www.783584.com-彩吧vip官方| www.874397.com-福彩3d猜一d| www.952842.com-3d旺彩预测-| 凤凰彩票网www.370766.com| www.65815.com-福彩32期中奖号码| www.yr55.com-足彩3场2关-| www.531611.com-福彩3d预测app| www.657825.com-彩神计划手机版苹果| www.720.online-百万彩票网骗局揭秘| www.451632.com-中彩在线贺文视频| www.526255.com-把时时彩当成投资| www.712676.com-秒速时时采彩开奖| www.789537.com-竞彩买单关能赚钱吗| www.865286.com-时时采彩宝典| www.927700.com-福利彩票是几个数字| www.981865.com-分分彩平台注册| www.ci19.com-彩票网站源码| www.336484.com-彩票提现多久到账| www.517287.com-福彩万能五码走势图| www.613769.com-体彩11选5最大奖| www.685063.com-福彩走势和制图搜索| www.762521.com-怎么下载竞彩258| www.881502.com-排三走势图彩吧助手| www.959340.com-快三提前看开奖结果| www.264382.com-手机彩票合法的吗| www.659746.com-七天彩是个什么平台| www.27847.com-上彩票-| www.687666.cc-139彩app下载| www.333684.com-彩票中奖让父母领奖| www.619277.com-昆明福彩中心在哪里| www.384501.com-彩688下载-| www.160709.com-北京彩票站转让信息| www.261760.com-福彩快2玩法介绍| www.566957.com-好彩堂幽默资料| www.067622.com-3d彩票走势图大全| www.206338.com-神州彩票合法吗| www.732123.com-政府会管结婚彩礼吗| www.835846.com-好彩一二打一生肖| www.905280.com-彩票cp816骗局| www.110909.com-二人生日彩票| www.540911.com-排列三缩水彩吧工具| www.093207.com-彩钢瓦围挡多少钱一| www.108115.com-彩票无规律-| www.47ow.com-今天甘肃快三推荐号| www.0525.org-78.cn彩票-| www.04566.com-河北省彩票中心| www.35ix.com-南京体育彩票网站| www.0664.xyz-app-5星彩-| www.13556.com-正规的网上彩票平台| www.68862.com-众彩网是骗局揭秘| www.996030.com-网易彩票开奖手机版| www.cf19.com-快三彩票网站搭建| www.tm57.com-琓彩人杀号-| www.645099.com-青岛彩票兑奖中心| www.623912.com-乐彩购下载-| www.203045.com-江苏快三代理| www.773596.com-彩票百分百中奖秘籍| www.885383.com-彩宝批发app| www.cp314.com-快三开奖结果广西| www.ri88.com-快三必中两码| www.039507.com-七彩彩票网能信吗| www.69kb.com-快购彩票是啥意思| 新盈彩www.xinyc8.com| www.280337.com-体彩七位数最新预测| www.439917.com-讧苏快三开奖号码| www.am70.cc-收贵州快三-| www.vz93.com-手机赌博北京快三| www.716757.com-彩铅画图片人物古风| www.362104.com-描写彩虹品质的诗句| www.676664.com-下载彩吧图库第一版| www.768794.com-彩票中了大奖怎么领| www.859098.com-河北福彩河北福彩网| www.931369.com-网彩大吉娱乐| C9999www.318548.com| www.882347.com-078彩-| www.tr88.cc-网上刷彩票犯法吗| www.15gi.com-618彩票快三| www.38197.cc-e彩堂网址-| www.430058.com-高清水彩花卉图片| www.379509.com-西京宝马彩票案| www.531125.com-彩票止盈止损大师| www.019203.com-彩票行家全年资料| www.72732.com-彩友多app下载| www.2026.date-好彩堂跑狗论坛| www.579155.com-柬埔寨五分彩| www.4410.cn-满堂彩彩票网app| www.693556.com-足球竞彩比分赛果| www.776811.com-锋彩直播官网首页| www.855333.com-3d字谜新彩网| www.922193.com-人人彩票资料| www.977026.com-河南的彩礼是多少| www.yn.cc-中国福彩七乐彩玩法| www.qy66.com-天天分分彩-| www.852058.com-分分彩都是假彩| www.943475.com-易盈彩票是正规的吗| 亿彩彩票www.588yc.com| www.386208.com-彩票代玩任务| www.520521.com-e球彩总进球数奖项| www.592992.com-彩虹6号手机版| www.259882.com-最近福利彩票点| www.684343.com-体彩排列三专家杀号| www.765035.com-彩票平台网站搭建| www.021722.com-福彩20选8陕西| www.605883.com-注册彩乐园邀请码| www.713826.com-快三最大的奖项| www.794962.com-体育彩票飞鱼走势图| www.869325.com-彩票快三怎么下载| www.922833.com-福利彩票可以转让吗| www.971639.com-创彩网app下载| www.lq8.com-河北福彩3d和值表| www.900249.com-陌陌彩票注册送28| www.620573.com-补偿公告腾讯彩票网| www.701023.com-足彩对阵表分析| www.781708.com-七星彩几点停售| www.855449.com-官方金沙国际投彩网| www.928103.com-彩色复印机印钱| www.982308.com-福彩六十一规则| www.ft82.com-宝马彩票app| www.17617.cc-竞彩足球比分结课| www.533107.com-篡改彩票-| www.090636.com-帮买彩票赚佣金揭秘| www.678617.com-环彩触屏网址| www.757926.com-彩票作假事件视频| www.860886.com-黑龙江体彩十一选五| www.918737.com-银河博彩-| www.963483.com-澳客彩票客户端旧版| www.cai10.com-贵州快三走势图| www.777787.cc-购彩网登录-| www.853634.com-重庆时时福利彩票| www.916338.com-时时彩送彩金网站| www.975394.com-555彩票app-| www.gr.cc-旺彩预测app下载| www.pv06.com-1998彩票集团| www.5mj.cc-竞彩纳税规定| www.64ao.com-众彩网被骗的| www.731584.com-众彩平台下载| www.799202.com-多赢彩票手机app|