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.p51.com-彩票排5走势图| www.28393.cc-苏州彩票大奖| www.008729.com-qq彩票网站-| www.163666.com-乐彩模拟投注| www.114138.cc-福彩3d定跨度方法| www.0626.org-武汉福彩机转让| www.0728.com-什么是彩票跟单| www.11950.com-u9彩票是违法的吗| www.770826.com-辽宁省福彩举报电话| www.919152.com-私彩信誉排行榜| 幸运彩票www.73166e.com| www.22387.cc-彩票6十1开奖查询| www.85397.cc-湖北快三一点定牛| www.8454.xyz-小财神彩票论坛分析| www.975141.com-彩票查询七星彩今日| www.av96.com-爱乐彩快3-| www.zz20.cc-彩票店怎么申请| www.45zn.com-陇彩票-| www.559.cm-重庆时时彩五星龙虎| www.655332.com-彩投网app下载| www.045155.com-彩票中奖利器| www.801303.com-c9彩票是非法的吗| www.931084.com-历年7星彩开奖号码| www.cp5033.com-福彩甘肃快三玩法| www.zx11.com-彩票选号软件哪个好| www.91yr.com-彩票工资车有哪些| www.8636.cc-上海福彩3d开奖| www.563367.com-7星彩票开奖走势图| www.666602.com-彩票培训师考试| www.748530.com-600w彩票网软件| www.836533.com-好彩是非法的吗| www.905663.com-一分快三大小玩法| www.977300.com-内乡彩礼-| www.cn3.com-时时彩怎么玩都是死| www.oy82.com-福利彩票快3咋玩| www.7at.com-宁波年会彩票| www.67oj.com-体彩大奖得主排行榜| www.770942.com-开彩之家-| www.vo1.com-马来西亚彩票网站| www.897015.com-街机游戏新快三| www.3778.biz-竞彩篮球实时比分| www.9651.loan-福利彩票开心奖结果| www.69836.com-四川快三下载| www.590867.com-二鱼玩彩胆码今天| www.726212.com-双色球杀号南方双彩| www.125242.com-盈盈彩appios| www.73621.com-泉州福建体彩聊天室| www.318591.com-体彩869前后关系| www.515476.com-七星彩中了500万| www.721566.com-竞彩足球大神推单| www.897385.com-体彩竞猜怎么玩| 易彩堂www.55885g.com| www.202328.com-彩票平台刷流水工资| www.193836.com-长春体彩兑奖中心| www.333683.com-彩票中奖离婚| www.523350.com-在线时时彩后二缩水| www.691536.com-麒麟竞彩下载| www.841933.com-买胜负彩赚钱方法| www.980721.com-彩77网址下载| www.lr40.com-网络彩票排行版| www.507978.com-福利彩票3d直通车| www.692207.com-足球彩票开奖规则| www.059074.com-乐彩写真机驱动下载| www.5442.in-下载彩38-| www.436193.com-重庆福彩走势图| www.518872.com-彩票字谜3d-| www.583802.com-app彩乐汇下载| www.7qw.com-浙江年会中彩票| www.057342.com-安徽福彩安徽福彩报| www.152722.com-百宝彩电视走势图| www.052961.com-体育彩票可以过户| www.693970.com-29彩-| www.000333.cc-天津时时彩开奖重复| www.192796.com-韩国彩票网-| www.099321.com-彩票大奖得主| www.567144.com-台湾彩虹论坛| www.1457.xyz-彩铅动物手绘图片| www.cp939.com-安徽快三走势图牛| www.rc30.com-时时彩长期稳定打法| www.539062.com-8k彩票816cc| www.606392.com-彩票停售2019| www.676069.com-福彩3d诗句-| www.936680.com-自动体彩贩售机| www.990226.com-中体育彩票-| www.zl2.com-中国福利彩票玩法| www.82179.com-彩七七充值不到账| www.4202.cm-湖南七彩集团| www.732277.com-订婚退彩礼案例| www.059188.com-中国彩票排行榜| www.602132.com-80彩票是什么软件| www.693116.com-中国体彩摇奖中心| www.772630.com-福彩3d直选高手| www.869861.com-彩票开奖在哪里看| www.926708.com-彩票达人论坛| www.689938.com-互联网彩票法律法规| www.777015.com-彩播最新版本| www.843012.com-福利彩票哪年发行的| www.896971.com-恒发彩票-| www.954147.com-美税无嘴骆驼和好彩| 吉利彩票www.80065d.com| www.34fg.com-廉江七星彩交流论坛| www.185548.com-北京快三走势图一定| www.951246.com-彩票aqq下载大全| www.03746.com-人们该不该买彩票| www.198301.com-彩票快3选号技巧| www.38818.cc-红彩会彩票网址| www.fv09.com-江苏快三遗漏数| www.xj57.cc-福彩天地报手机版| www.5181.com-福彩刮刮乐10元| www.66136.cc-大师彩票app| www.055146.com-看东西有彩色光环| www.161986.com-湖北快三热的早知道| www.571796.com-本群福彩快三| www.503113.com-福彩3d怎样中奖高| www.34941.com-1爱彩乐-| www.574104.cc-自己玩黑彩算犯法吗| www.811409.com-福彩双色球直播开奖| www.920734.com-百万彩票-| 500彩票www.50052q.com| www.602302.com-快三提现多久能到账| 8号彩票www.60108y.com| www.790171.com-数字型彩票分析软件| www.332867.com-彩票频道新浪手机网| www.429779.com-樱花星空水彩画教程| www.c77.cm-百宝彩十一选5| www.50yv.com-足球竞彩腰斩怎么算| www.649.bid-哪个平台有圣地彩| www.3745.cn-全部七星彩准确资料| www.513234.com-爱购彩进不去| www.490810.com-淘宝彩票如何下载| www.632490.com-七星彩后三位中奖吗| www.650308.com-网上博彩犯法吗| www.163847.com-福彩3d容错缩水| www.xh27.cc-彩虹e台-| www.069123.com-河北快三骗局| www.234026.com-注册送彩金彩票| www.609751.com-7星彩开奖直播频道| www.cp6715.com-江苏快三真能赚钱吗| www.6683.vip-乐视赢家彩票| www.903623.com-大发快三输了怎么办| 彩乐乐www.3005y.com| www.42dc.com-彩虹球-| www.03913.com-中彩网客户端4.0| www.581370.com-彩票走势看号技巧| www.771624.com-娱乐彩票软件下载| www.318467.com-南昌假彩票站| www.436876.com-荣一彩票-| www.525516.com-重庆时时彩关闭新闻| www.803133.com-彩圣网免费大全| 彩票驿站www.2350w.com| www.22731.cc-体彩可以电话投注么| www.817608.com-快三自动计划软件| www.883159.com-678彩票娱乐| www.951061.com-新彩票网走势图首页| www.988156.com-优信彩票邀请码最新| www.ua2.cc-彩票306软件| www.598742.com-排列三黑彩玩法| www.874461.com-双色球专家说彩| www.n10.top-时时彩黑平台| www.708558.com-江西时时彩彩票| www.893032.com-瑞彩祥云下载软件| www.017142.com-网购彩票软件排行榜| www.703848.com-澳超竞彩-| www.b12.pw-澳门博彩app下载|