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.5095a.com| www.219784.com-众彩网程远预测| www.369417.com-牛币彩票-| www.38931.cc-体彩七位数中奖| www.808668.cc-网络彩票害死多少人| www.ef93.com-希望彩票是不是骗局| www.39ui.com-百度彩票猜谜| www.120617.com-河南快三组合走势| www.3393.mobi-18k彩金戒指| www.32638.com-中国江苏体育彩票| www.083523.com-彩票什么方法买号准| www.186835.com-预测分分快三软件| www.967204.com-北京快三看对子技巧| www.ge72.com-江西福利彩票app| www.205229.com-快三安徽-| www.92618.com-立彩佳美缝剂好不好| www.140885.com-山东福彩网首页| www.278872.com-新快三如何打| www.507373.com-彩吧vip平台注册| www.689179.com-七乐彩开奖重复过吗| www.815299.com-排列5福彩-| www.970532.com-攻破彩票-| www.zw46.com-上海体彩店盈利| www.86oj.com-乐透了彩票足球| www.6856.cm-剪彩花球开业庆典| www.35587.cc-超级彩票助手电脑版| www.133090.com-一分彩一天开多少期| www.194691.com-大发快三计划网页版| www.986226.com-体彩p3今天开奖号| www.fo97.com-分分时时彩一期计划| www.056668.com-七星彩历史最大奖| www.17162.com-8618彩票靠谱吗| www.26841.com-众彩网专家预侧汇总| www.022803.com-500彩票是真是假| www.963938.com-彩虹周杰伦下载| www.9316.biz-吉祥彩提款被拒绝| www.162759.com-好彩自然来剧情| www.858354.com-bb3d彩票官网| www.95376.com-彩票不公平-| www.309574.com-体彩几位数-| www.2029.org-福彩3d中彩网顶测| www.35333.com-网站玩时时彩正规吗| www.334163.com-三亚彩票私彩| www.511773.com-彩客网公司-| www.187579.com-拉人玩时时彩判几年| www.219415.com-福彩6-| www.867330.com-v8时时彩平台注册| www.984421.com-福利彩票可以买什么| www.38589.cc-大奖彩票首选网站| www.xd34.com-52幸运彩-| www.44wv.com-uc彩票技巧-| www.026819.com-网上的01彩票犯法| www.528218.com-第一台彩色相机下载| www.999029.com-e球彩全包48元| www.eo67.com-五福福彩官方下载| www.000852.com-蚂蚁积分买彩票| www.s18.red-北京体彩网点申请| www.928175.com-连运彩app-| 彩神网www.csw288.com| www.347654.com-天天彩票集团软件| www.44nh.com-江苏快三全天82期| www.7951.pw-五彩椒能活几年| www.kl3.com-彩票中奖的真实案例| www.rg37.com-北京市福利彩票快三| www.45545.com-中国彩票双色球复式| www.165011.com-中彩在线贺文| www.500500.com-分分彩如何看号| www.592084.com-七星彩质合路走势图| www.381793.com-肥城福彩中3亿| www.499914.com-河内5分彩被骗| www.637369.com-彩虹5号电池评测| www.749855.com-重庆福利彩票十分钟| www.865909.com-熊猫彩票可靠吗| www.953954.com-欧盟好彩柠檬| www.076558.com-凤凰彩票计划微信群| www.21vi.com-体彩考试题库| www.067777.cc-时时彩个人平台搭建| www.510512.com-体育彩票几天开奖| www.2456.cc-竞彩篮球稳赚的方法| www.054.biz-体彩7位数兑奖规则| www.5037.wang-梦见彩票号码又忘了| www.026443.com-青海省福利彩票快三| www.62155.com-福彩大赢家论坛| www.20oy.com-体育彩票3月16| www.292407.com-时时彩倍投方式| www.388917.com-幸运快三公式| www.499628.com-彩票系统之家| www.4559.biz-彩票买什么号中奖| www.578354.com-腾讯5分彩在哪里| www.684775.com-福彩3d秘诀宝典| www.68212.com-福利彩票如何中奖| www.069221.com-福利彩票网易| www.168386.com-湖北快三一定牛今天| www.294004.com-驿站彩票首页| www.610638.com-福彩3d天庚图| www.31qp.com-七乐彩每周开几次奖| www.509613.com-彩票大本赢软件平台| www.682011.com-多多中彩票下载| www.954381.com-牛蛙彩票四不像| 幸运彩票www.572699.com| www.80la.com-金誉彩票网vip| www.878629.com-河北福彩快3推| www.954682.com-快三可以作弊吗| 万彩网www.638262.com| www.33538.cc-彩票分类-| www.2790.cn-体育彩票手机在线| www.19230.com-网易彩票是怎么回事| www.582254.com-e77乐彩官网| www.706493.com-玩黑彩票犯法吗| www.795372.com-3d彩票兑奖有效期| www.v97.net-3d彩邪恶-| www.cr6.com-三分快三开奖规律| www.np73.com-京东快彩是什么| www.13sb.com-体彩编号如何查询| www.23sr.com-韩国时彩-| www.471633.com-台湾5分彩下载| www.598082.com-足彩比赛结果及奖金| www.714178.com-彩神1是真的吗| www.938274.com-彩票投注站会改革吗| www.eo84.com-五福彩票网下载| www.c17.club-七星彩出奖号码查询| www.43zc.com-网络彩播是什么意思| www.6505.cn-那个彩票平台靠谱| www.36985.com-天天中彩票软件版本| 大赢家彩票www.599546.com| www.lw60.com-广东福彩好彩一遗漏| www.628357.com-三分快三团队| www.71587.com-深圳龙华区福彩| www.1456.net-天天爱彩票交流群| www.9461.com-各个省份彩票种类| www.804453.com-易悠710彩票下载| www.917820.com-彩虹吉他谱周杰伦| www.974183.com-36o彩票快三| www.469448.com-乐彩网摘图谜总汇| www.59us.com-体彩兼营店与专营店| www.990485.com-大本赢彩票官网登录| www.dt38.com-幸运彩票是不是骗局| www.b91.pw-福彩三地杀码| www.668191.cc-永和彩票app| www.735956.com-新浪彩票_首页| www.832279.com-七彩影院骗局| www.941868.com-彩票通彩票-| 汇丰彩票www.hf0688.com| www.143968.com-好彩123彩票| www.347911.com-添光溢彩近意词| www.431008.com-足彩竞彩总进球| www.65545.com-快三分分彩计划| www.rz34.com-网络彩票拉人的话术| www.617654.com-天价彩礼图片| www.63755.cc-古建寺庙彩绘图片| www.38vb.com-体彩实体店分布| www.7ow.cc-合伙买彩票好吗| www.231650.com-江苏快三所有号码| www.332178.com-买彩票赚钱吗| www.73434.com-49彩票资料-| 500彩票www.347177.com| www.278512.com-五福彩票官网版下载| www.731747.com-彩色纸箱包装厂家| www.848867.com-时时彩精确预测软件| www.920639.com-福建快三中奖规则| www.974171.com-福彩刮刮乐编码| www.079968.com-彩票税收-| www.vp83.com-湖北福彩网彩票| www.25ag.com-好彩快印电话|