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.693084.com-体彩双色中奖说明| www.145887.com-三d彩票的买法| www.232864.com-新浪足球彩票彩| www.58023.com-购彩网是真的| www.571217.com-高频彩人工计划网站| www.072106.com-彩票中奖者的自述| www.3899.net-法律规定结婚彩礼钱| www.603831.com-佬佬牛足彩博客| www.883976.com-新西兰快三是黑彩吗| www.960824.com-体彩排列三字谜总汇| 500彩票www.645977.com| www.55164.com-网站送彩金-| www.012178.com-福利彩票结果双色球| www.002404.com-福彩彩易网-| www.999702.com-体彩排列五两元网| www.937693.com-彩票故事新闻中大奖| www.fm36.com-快三群里的假土豪| www.810307.com-全民彩票手机版下载| www.948636.com-体彩排列五几天开奖| www.228.cm-万博彩票真实吗| www.250979.com-中彩啦安卓版| www.381534.com-婚恋网玩彩票的软件| www.523696.com-在线时时彩后三做号| www.23023.cc-王者28彩票app| www.161032.com-广东福彩网官方首页| www.86139.cc-彩涂铝板的用途| www.091342.com-易盈彩票平台| www.212790.com-博彩888官网| www.389058.com-分分彩提前开奖网址| www.542848.com-彩票怎么中奖几率高| www.39723.com-98098彩票信誉| www.sc59.com-彩500下载网页| www.26xu.com-体彩大乐透购买中心| www.317087.com-中华彩票网手机版| www.312346.com-福利彩票3d玩法| www.512878.com-幸运快三好运快三| www.520305.com-体彩专家三天计划| www.618482.com-久荣国际彩票| www.707976.com-易彩堂提现-| www.672356.com-玄机图牛彩网大乐透| www.9275.xyz-彩票站每天有人倍投| www.rq56.com-重庆时时彩载止了吗| www.18612.cc-竞彩足球合买骗局| www.30666.com-彩16官网正版下载| www.825188.com-3d福彩东丹图| www.539418.com-彩票有追杀吗| www.592977.com-彩虹六号笔记本配置| www.712707.com-彩票店转让协议| www.61166.com-彩票推荐网站双色球| www.ej07.com-北京快乐彩开奖记录| www.608329.com-彩票3d200-| www.4741.com-游戏机厅彩票券| www.107701.com-香港九龙彩票| www.280043.com-福彩快乐12-| www.94yn.com-仨地乐彩网走势图| www.63214.com-驻马店西平农村彩礼| www.18hd.cc-亿彩票网站-| www.bb19.com-快三挣钱方法| www.79520.com-福一利彩票双色球| www.111086.com-彩票中奖小说排行榜| www.cai532.com-快三计划软件安卓版| www.l09.cn-棋牌彩票新平台| www.83br.com-彩印和原件差别大吗| www.622066.com-福彩3d二码四码| www.692928.com-31人合买彩票中奖| www.61ik.com-c760彩票下载| www.711765.com-天天福彩软件| www.893020.com-大中华彩票软件下载| www.xj68.cc-甘肃福彩网官网| www.156004.com-好彩网平台合法吗| www.130600.com-甘肃福易快三| www.097779.com-快三哪个群可信吗| www.728542.com-雪缘园足彩直播| www.816959.com-中发彩票联系方式| www.900877.com-辽宁3d水果图彩吧| www.cq08.com-购买私彩是否违法| www.61197.cc-体彩ios-| www.821762.com-福彩3d小小鱼彩圣| www.kd33.com-福彩中奖结果| www.66151.com-青海福彩3d开奖| www.035920.com-快三一天开几期| www.2301.me-怎么看微彩票分分| www.2811.xyz-红红火火彩票| www.22289.com-彩虹世界app新版| www.392128.com-体彩小品-| www.512302.com-彩铅素描香蕉| www.322866.com-旺彩双色球登录| www.3740.top-七星彩奖结果查询期| www.796340.com-尊彩合法吗-| www.898973.com-一份外卖送给彩票| www.961921.com-深圳市福利彩票官网| www.cp465.cc-合肥福彩快三开奖| www.ly.com-体彩网首页-| www.lt06.com-中彩网可以提现吗| www.19ov.com-潍坊体彩店转让| www.682986.com-大圣彩票家下载| www.254644.com-重庆时时彩下载| www.373803.com-什么是智投彩票| www.526311.com-下载时时彩助赢计划| www.636546.com-彩虹5多少钱一架| www.721411.com-数学天才研究彩票| www.099657.com-7乐彩走势图带连线| www.179735.com-新快三是哪里开号的| www.277823.com-2m牛蛙彩票开奖直| www.14140.cc-新浪彩比分直播一| www.640770.com-今日大乐透彩民乐| www.757208.com-彩色混凝土路面砖| www.945089.com-亚投彩票是不是违法| www.985606.com-江苏快三爱乐彩| www.so36.com-时时彩三星做号思路| www.120782.com-河南快三和值图| www.t78.cc-网上拉人买彩票| www.8811.cn-全天重庆彩龙虎计划| www.894825.com-二分快三开奖| www.980693.com-彩票77腾牛网| www.251766.com-正规彩票平台推荐| www.7703.vip-幸福彩票是黑平台| www.876710.com-幸运彩票不能提现| www.021179.com-彩票数字3-| www.986499.com-足球竟彩网-| www.989403.com-星彩网短信点播| www.87775.com-3分彩官方下载| www.114990.com-彩神8邀请码| www.210711.com-最大可靠的彩票平台| www.306927.com-合一彩票登录页面| www.s78.net-彩票中奖改变命运| www.96hv.com-奥鸿集团重庆时时彩| www.928234.com-高频彩种类-| www.ek65.com-彩票投注模式| www.420234.com-彩票刷分红-| www.550987.com-87彩店客户端下载| www.639094.com-宁波体彩店申请电话| www.800501.com-彩票3d试机号今日| www.884503.com-三d双彩图-| www.971666.cc-大牌彩票官网| www.na10.com-贵州快三多少期| www.0zs.cc-红彩网络直播吃饭| www.56sx.com-汕头彩票中奖新闻| www.388813.com-竞彩这个倍率怎么算| www.4806.org-高频彩赢钱技巧| www.52767.cc-恒大彩票提不了现| www.031879.com-p62彩票开奖结果| www.234214.com-哪个网站可以买彩票| www.33174.com-国家快频彩票有哪些| 凤凰彩票www.77803y.com| www.888577.cc-107彩票下载| www.979982.com-网上体彩店-| www.qq03.com-福彩新主任是谁| www.0415.me-福彩校验码-| www.rf96.com-168彩票安卓版| www.09ci.com-中彩网开奖信息| www.76uk.com-彩票彩票开奖大全| www.16iq.com-彩票不倒翁投注方法| www.xx93.com-千万彩票网站| www.12ay.com-七彩虹颜色排序| www.587960.com-彩色复印机租赁价格| www.bx57.com-网上怎样玩快三赚钱| www.9as.com-中国体育彩票好做吗| www.nr6.com-湖北福彩快三奖金| www.772732.com-吉利的彩票群名| www.890710.com-彩票平台倍数高| www.cp45.cc-百胜快三网址| www.3915.org-七星彩最新抓码规律| www.8463.pw-乐彩娱乐骗-|