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.38ac.com-七彩乐中奖号| www.3090.biz-吉林省彩票得主| www.378957.com-k彩是真的吗| www.41po.com-七星乐彩票倍投规律| www.4638.com-买彩票是真的吗| www.qo48.com-邀请玩彩票是骗局吗| www.se51.com-腾讯1.5分彩| www.83az.com-移动彩云业务是什么| www.384050.com-体彩题库-| www.161771.com-美国洛杉矶国际快三| www.132736.com-世界杯足彩中奖规则| www.39772.cc-中福彩票赛车| www.899469.com-微信彩神通代理三码| 凤凰彩票www.88266p.com| www.315321.com-七彩坊运动内衣连锁| www.445055.com-义乌市福彩网| www.550513.com-曾峰休闲快三教学| www.3272.xyz-万达彩-| www.00713.com-多彩烟蓝莓味多少钱| www.67528.cc-快三组合表图| www.vo52.com-中彩网三地推荐号| www.954212.com-709彩票网下载| www.yp50.com-快餐快三开奖结果| www.70077.com-福利彩票算法| www.031879.com-p62彩票开奖结果| www.72oy.com-手机福彩官方网站| www.023975.com-买足彩输的家破人亡| www.028559.com-彩报开机号板| www.606722.com-福彩能在网上买吗| www.998691.com-中国体彩足球竞猜| www.9738.pw-彩宝真的假的| www.8929.online怎么下博彩软件| www.726625.com-用手机能买彩票么| www.727638.com-云彩厅真的假的| www.801707.com-广西福彩地址| www.877028.com-彩票分类及玩法| www.950469.com-乐彩客平台-| 大赢家彩票网www.54400f.com| www.917.net-大悲咒求财中彩票| www.676712.com-七星彩连线走势| www.508840.com-华夏时时彩的网址| www.873692.com-中华彩票开机号| www.973879.com-彩票361官方注册| www.148125.com-迷彩战士是什么动物| www.448225.com-体彩二维码用什么扫| www.717971.com-中国体彩报牛亮最新| www.qm00.com-福彩快三和值概率表| www.19be.com-第19011期体彩| www.rv8.com-万达大玩家彩票攻略| www.b73.tv-时时彩和快三| www.gc98.com-老彩民网站-| www.1nl.com-体彩店可以转让吗| www.57sp.com-姚记彩票下载| www.0it.cc-世界上最真实的彩虹| www.502211.com-手机投彩骗局| www.737733.com-下载福彩摇奖机| www.878729.com-福利彩票积分卡| www.6820.cn-24号福利彩票| www.76639.cc-开户送彩金棋牌娱乐| www.059663.com-福利彩票中心主任| www.174904.com-福彩快三大全下载| www.292407.com-时时彩倍投方式| www.369560.com-旺旺彩1.1.7| www.633315.com-内蒙时时彩开奖票控| www.802660.com-福彩彩界的精英双胆| www.869695.com-49彩票正规吗| www.da86.com-彩神1软件下载| www.262333.com-福彩3d常根版| www.563456.com-3d彩经大全-| www.789224.com-竞彩老吴-| www.78245.com-排列三论坛家彩网| www.231739.com-买彩票软件下载| www.320768.com-百宝彩网-| www.901120.com-福建体彩报-| www.989635.com-国民彩票手机官网| www.kx89.com-高频游戏骗局时时彩| www.856787.cc-福彩今天中奖号| www.912796.com-丹麦快乐彩官网| www.972364.com-查体彩开奖号| www.250399.com-全中彩票官网下載| www.316091.com-上海开体育彩票店| www.502009.com-70005大佬彩票| www.23451.cc-韩国1.5分彩票| www.412813.com-湖南福彩数字3| www.026178.com-网上彩票兼职| www.207568.com-中国福彩快三软件| www.338437.com-彩票app最可靠| www.418515.com-福彩20选8技巧| www.723205.com-常州市福彩中心地址| www.866551.com-私彩代理提成多少| www.971362.com-88彩票软件-| www.ca37.com-快彩乐官网-| www.672268.com-彩宝彩票c-| www.743431.com-多多彩票平台| www.059798.com-福彩公益行最新消息| www.01522.cc-彩吧代理申请| www.222661.com-快三可以买大小单双| www.355742.com-竞彩中奖要交税吗| www.438835.com-桐梓县彩票店| www.530282.com-彩票规律表-| www.678933.com-米兜彩票app| www.808583.com-彩票分析软件安卓| www.08096.com-中国史上彩票最大奖| www.871200.com-彩专家海滨在线计划| www.928370.com-玩彩是干什么的| www.982170.com-3d新彩吧图谜| www.ld5.com-江苏e球彩中奖规则| www.1392.org-福彩三d林涛和值谜| www.36bd.com-海南七星彩梦册图| www.374.cm-彩票提前晒-| www.818033.com-胜负彩19040| www.171176.com-河北快三电视走势图| www.86ri.com-9b彩票会员登录| www.122864.com-彩53官网-| www.51la.cc-北京福彩发行总部| www.fc26.com-乐彩赢-| www.g73.biz-七星彩十专家预测| www.904122.com-华尔兹快三跳法| 中彩网www.61233g.com| www.ku80.com-彩票平刷王-| www.647893.com-体彩开奖和视频直播| www.537745.com-彩是表示颜色的字吗| www.678441.com-百度乐彩彩票网站| www.748370.com-517m5彩票注册| www.841337.com-福彩怎样处理数据| www.275382.com-时时彩怎么倍投合理| www.445639.com-博彩计划网源码| www.038096.com-390彩票app-| www.63rm.com-怎么制作彩票程序| www.137206.com-彩陶泥冰淇淋| www.006528.com-大星彩票走势图表| www.830067.com-篮球彩票在哪里买| www.08914.com-彩票甘肃快三| www.774415.com-竞彩篮彩技巧| www.707337.com-体彩283投资计划| www.356669.com-一日发彩票-| www.475883.com-北控国彩是骗局揭秘| www.543648.com-天下精英彩免费资料| www.620218.com-如何鉴别釉上彩| www.v65.org-3d彩报一版-| www.75lt.com-古建彩绘吧-| www.60140.com-彩票交税规则| www.4185.biz-七彩app真的假的| www.234080.com-彩票坊被骗-| www.55dq.com-体育彩票点抽成| www.dd95.com-彩票达人是什么生肖| www.a05.cc-上海快三41期预测| www.690627.com-体彩排5玩法| www.793826.com-网赌买彩票单双骗局| www.884164.com-五行3d图彩票| www.982830.com-盈彩大小单双号预测| www.bc02.com-安徽快三分布图| www.28ry.com-关小刀足彩-| www.354403.com-三个亿彩票-| www.17px.cc-彩票提现投注量| www.130741.com-许昌彩礼多少| www.024218.com-五星彩票下载安装| www.106014.com-牛蛙彩票四不像图| www.5020.cm-平台彩票可靠吗| www.41915.com-吉祥彩票网页版| www.82161.com-传统彩票靠谱吗| www.838105.com-易网彩票网开奖直播| www.376975.com-彩票开发的行业前景| www.236.cm-美国45秒彩票|