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天

知道了
彩01彩票 www.317717.com-胜负彩技巧-| www.435134.com-福利彩票兑换期限| www.523897.com-福彩快乐12怎么玩| www.589602.com-澳门六星彩特马网址| www.658621.com-受彩乐-| www.746904.com-蓝色好彩烟-| www.824680.com-网赚彩票群可靠吗| www.888874.cc-中信彩票是不是真滴| www.953380.com-奥客网竞彩比分直播| 彩82www.c9223.com| www.702326.com-中国足球彩票开奖| www.800291.com-体育彩票店的小知识| www.882465.com-吉林快三和值图表| www.955934.com-足彩胜负彩预测分析| 500彩票www.26299d.com| www.jz88.com-新二彩票app| www.x35.vip-国乐彩官网下载| www.941667.com-凤凰彩票网-| 500万彩票www.96386l.com| www.vi10.com-彩票规则介绍大乐透| www.22og.com-彩票投注免费领彩金| www.1163.pw-彩票三角码怎么组合| www.8241.top-万博彩票下载| www.297770.com-贵州体育彩票中心| www.386089.com-彩1234论坛网站| www.507507.com-天天好彩二四六资料| www.582558.com-彩票321期太湖| www.659562.com-休彩开奖直播频道| www.734618.com-彩漂粉-| www.811234.com-3d福彩中奖号秘密| www.884023.com-双阳彩票站快三黑彩| www.954302.com-小鹿网络重庆时时彩| 500彩票www.50026m.com| www.th12.com-浙江彩票有快三吗| www.22mj.com-网上彩票那个平台好| www.1236.live-快三顺子下期出什么| www.7402.vip-色彩搭配的技巧包括| www.21671.com-网投套彩金怎么套| www.66447.cc-苏宁彩票加盟吗| www.422195.com-新浪爱彩网彩票| www.527644.com-时时彩刷流水犯法吗| www.621967.com-彩运网官方下载| www.748342.com-竞彩收米是什么软件| www.906730.com-福彩有哪些彩票开奖| www.983884.com-1980彩票下载| www.fs11.com-快三对几个号中奖| www.u83.top-恶搞中奖彩票图片| www.65jo.com-体育彩票481| www.3399.in-足彩跟投app排行| www.23270.com-b8彩票下载-| www.72239.com-福利彩票怎么盈利| www.036961.com-01彩票手机-| www.189241.com-内蒙古快三app| www.275937.com-红牛快三平台| www.362686.com-中彩网北斗每天预测| www.470373.com-境外博彩支付宝代收| www.567145.com-最新彩虹台直播源| www.640080.com-福彩蛋蛋是什么意思| www.717198.com-彩铅绘画笔触| www.797812.com-山西十分彩-| www.877073.com-163彩票网-| www.954704.com-体彩手机在线下载| 彩天下www.196148.com| www.mo16.com-k彩手机登陆| www.p40.in-江苏快三是私彩吗| www.37vq.com-彩票运势占卜| www.301.link-快三怎么看长龙| www.3944.top-微彩网彩票是真的吗| www.9539.online彩色童话故事| www.72332.cc-江苏福利彩票试机号| www.030605.com-彩票单双大小| www.118350.com-体彩43期-| www.206912.com-170彩票网-| www.289659.com-106.彩票下载| www.368388.com-落日余晖彩铅画教程| www.461899.com-好彩客苹果下载不了| www.555405.com-湖北快三盘口| www.630540.com-八亿彩票app官方| www.725371.com-经典彩下载专区| www.803685.com-19054期彩票| www.878870.com-彩票彩种大全文库| www.962874.com-广东十一选主彩乐乐| www.65gh.com-说彩传媒3d-| www.30544.com-京东彩票扫码| www.99599.cc-华人彩登录官方网站| www.110054.com-连中彩票平台| www.263535.com-福彩都啥玩法| www.374908.com-七星彩本期开奖号码| www.35528.cc-香港快三软件下载| www.027613.com-易彩堂不给提现| www.193901.com-河北快三一定| www.377576.com-彩票店一般几点下班| www.125343.com-今天福彩奖号| www.692293.com-世界前十博彩公司| www.808922.com-柬埔寨五分彩官网| www.919921.com-彩票软件制作教程| www.111625.com-三分时时彩qq群| www.312628.com-快购彩平台怎么样| www.451605.com-幸运分分彩论坛| www.594128.com-竞彩既时比分| www.730902.com-足彩14场规则| www.860185.com-官网下载天天中彩票| www.984441.com-财神彩票正规吗| www.681344.com-77彩票赌会害| www.33941.com-彩票分析师-| www.025203.com-亿彩网官网登入| www.917272.com-必赢彩票案件| www.781846.com-58彩靠谱吗-| www.38227.cc-福彩双色球应用下载| www.089812.com-彩票代理平台微信| www.230262.com-幸运彩票正规吗| www.467258.com-足彩开奖公告开| www.632708.com-福利彩票限号规则| www.369401.com-彩票平台源码妙招| www.539061.com-谁知道快彩网站| www.692289.com-体彩七星中奖规则图| www.872711.com-福彩三的红五图库| www.054700.com-体彩出租或转让| www.296278.com-福彩快三qq群| www.603416.com-足彩外围平台| www.172487.com-11选5在线购彩| www.349988.com-绝望时买彩票都不中| www.518907.com-彩票客服工作怎么样| www.662081.com-翼彩宝是什么| www.804042.com-体彩排烈三数字累加| www.51ip.cc-华人彩官方登陆| www.894787.com-彩票开奖查结果查询| www.311.cx-金巴黎彩票链接| www.7288.wang-传统彩网址-| www.5823.cn-竞彩八串一-| www.497149.com-福彩手机投注后拿票| www.481012.com-和彩印取消-| www.606691.com-买体彩世界杯软件| www.747797.com-广州好彩丨开奖| www.893435.com-l乐彩娱乐计划助手| 幸运彩票www.444067.com| www.vk97.com-福彩调整公告| www.948085.com-福利彩票投注站加盟| www.981738.com-贵宾中彩网址是多少| www.318527.com-重庆彩必中计划| www.556201.com-爱彩乐怎么玩法| www.446999.com-黑网站和重庆时时彩| www.797229.com-98彩网站-| www.957805.com-彩票快乐十分走势图| www.69502.com-彩票77网址是多少| www.506464.com-玩时时彩犯法吗| www.650543.com-陈流水彩视频| www.779441.com-体彩七星彩34期| www.62el.com-发彩神-| www.02433.cc-彩票2000试玩金| www.103877.com-安徽快三查询| www.417798.com-盛大彩票网合法吗| www.682980.com-哪里有买彩票的网站| www.794234.com-购买体彩属于赌博吗| www.93103.com-彩票533计划| www.187016.com-分分彩下载安装| www.79158.com-采开头的四字成语彩| www.76ro.com-马耳他彩票幸运飞艇| www.509133.com-4157彩民红高手| www.15pr.com-分手彩礼要给男方么| www.693599.com-爱乐透福彩双色球| www.977082.com-彩妆店加盟哪家好| www.78658.com-竞彩店怎么赚钱的| www.186104.com-彩票十分钟-|