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.741198.com-体彩跟双色球的区别| www.4433.ren-网彩怎么赚钱技巧| www.822606.com-买彩票有技巧| www.706111.cc-腾讯时时彩一码必中| www.83bv.com-彩印包月-| www.7056.vip-彩票310什么意思| www.039349.com-万鑫彩票-| www.65502.com-炫彩软件-| www.71js.cc-恒彩客户-| www.595915.com-鑫彩娱乐-| www.720025.com-七星彩购买技巧| www.964131.com-足球彩票投资技巧| www.28ge.com-海南私彩大奖软件| www.0723.wang-彩票安徽15选5| www.272596.com-彩票公益金-| www.81155.cc-双色彩票玩法规则| www.122340.com-中乐彩75秒-| www.58963.com-拉萨有彩票游戏机吗| www.020913.com-福彩1d打法-| www.104028.com-篮球竞彩预测| www.489100.com-四川福彩招聘岗位| www.8664.tv-七乐彩近100| www.cp5561.com-彩票快三有口诀吗| www.mp08.com-赌博送388彩金| www.12yl.com-彩8图库-| www.98pq.com-鞍山彩票大案| www.3808.net-海南彩票规律图| www.662930.com-杳彩票开奖公告| www.028592.com-中国彩票三十六选七| www.6688.me-中国体福建体彩网| www.694067.com-吉林快三作预测| www.818042.com-足彩19024开奖| www.887632.com-十一选五彩票能买吗| www.sd24.com-吉林快三坑爹| www.38wo.com-七星彩规律公式| www.1383.vip-水彩画入门-| www.18us.com-今七乐彩几点开奖| www.862.cm-彩36彩票-| www.314322.com-⊙江西快三和值推荐| www.650767.com-海边沙滩水彩画| www.959894.com-网上买彩票的兼职| 大赢家彩票平台www.068639.com| www.358937.com-新浪微博彩票平台| www.459516.com-365约彩官方网站| www.554287.com-时时彩对赌刷返水| www.624203.com-金彩子官网-| www.078111.com-美狮彩票是真的假的| www.176643.com-百盈快三玩法| www.255596.com-时时彩回血平投| www.363078.com-灯产生彩虹-| www.19ve.com-亿博彩票是骗局吗| www.031013.com-菲律宾vr彩票| www.0023.com-买彩票一共多少数字| www.51537.com-糖果彩兼职-| www.034508.com-nba彩票真-| www.431136.com-中国福彩兑奖时间| www.1921.com-河内五分彩全天计划| www.970157.com-威力彩開獎號碼| www.636529.com-彩虹无人机大单| www.768599.com-体彩开奖18094| www.868599.com-七星彩第二位杀号| www.948726.com-鑫彩网彩票注册官网| 华彩www.71399e.com| www.193972.com-分分快三大小技巧| www.962494.com-福彩猜2d中奖金额| www.03td.com-体彩周四彩票开什么| www.3831.in-3d走势图彩径网| www.83877.com-七星彩走图势| www.552168.com-江苏11选五爱彩乐| www.828254.com-澳门威尼手机彩票网| www.988790.com-彩8app下载-| www.g87.net-河南福彩快3遗漏| www.303452.com-唯彩会最新版下载| www.398356.com-彩票摇摇乐下载| www.021540.com-新宝3彩票-| www.113453.com-郑州福彩兑奖中心| www.222057.com-七星彩预测号码| www.569815.com-三分时时彩计划网页| www.689818.com-新浪微彩票官网| www.774928.com-快三购彩小帖士| www.px00.com-小站宝彩票-| www.1wj.com-花生彩票靠谱吗| www.000276.com-专业玩彩个网页| www.32619.cc-竞彩足球新浪爱彩| www.93634.com-彩泥相框画-| www.91nb.com-银行卡号被十三彩| www.191687.com-吉林快三计划手机版| www.49lr.com-9千万彩票-| www.0622.cm-河北快三开奖结杲| www.0520.cn-福彩3d彩票大盈家| www.539643.com-幸运时时彩趋势图| www.207156.com-竞彩篮球nba| www.305186.com-01.cc彩票-| www.385090.com-购彩票软件-| www.be3.com-快三哪个app安全| www.567719.com-彩票搞笑段子精选| www.734770.com-足彩新浪彩票老版| www.861925.com-多彩网-| www.519092.com-体彩19015期| www.660548.com-彩票怎样杀号| www.780175.com-福彩站背景墙| www.947923.com-体育彩票的买法| www.2kp.com-竞猜体彩家破人亡| www.19gl.com-福利彩票能中奖吗| www.909172.com-河北快三怎么选号| www.95oq.com-什么是多彩投| www.2810.cc-排列三预测家彩论坛| www.46520.cc-万豪福利彩票苹果版| www.168428.com-河北快三形态走势图| www.7762.vip-多多中彩票安全吗| www.309165.com-tt直播购彩| www.8166.loan-最新足彩开奖结果| www.203391.com-快乐彩33-| www.290341.com-内蒙古福利彩票开奖| www.38699.cc-308彩票蛋蛋| www.1952.wang-徐文轩福彩链子| www.486622.com-陕西省福彩兑奖地址| www.136906.com-附近福彩-| www.821348.com-牛彩网字谜汇总| www.906533.com-七彩网名-| www.967103.com-qq群里玩彩票的| www.cp5659.com-三分快三是什么彩票| www.tf36.com-内蒙古快三跨度和值| www.489570.com-查今天七乐彩开奖号| www.503781.com-足彩六场半全场规则| www.8qm.com-彩运来登录-| www.519049.com-网彩何时能开售| www.584442.com-k73彩票app-| www.08004.cc-中了彩票大奖| www.604509.com-彩票在线摇一摇| www.2ci.com-10选1彩票技巧| www.563887.com-500线上彩票下载| www.645431.com-酷彩网时时彩平台| www.717082.com-彩铅线描画-| www.789175.com-皇冠竞彩平台| www.863065.com-彩票51-| www.934567.cc-快彩app浙-| www.997267.com-大乐透众彩网首页| www.591420.com-博彩免费白菜网论坛| www.855667.com-网上购买世界杯彩票| www.590773.com-现在二婚彩礼多少钱| www.989407.com-彩票兼职投注给账号| www.ii00.cc-中国竞彩网竞彩足球| www.jk03.com-河南快三官网| www.v09.net-太原体彩中心地址| www.44lh.com-足彩竞猜串关规则| www.553.live-易购娱乐时时彩平台| www.726846.com-明彩电影-| www.865078.com-新华网彩票推荐| www.961127.com-安徽彩票15选5| www.gs62.com-江苏体彩彩票网| www.yr71.com-有没有澳门福彩快三| www.29tp.com-彩铅画人物动漫图片| www.740089.com-澳门彩票网站大全| www.616275.com-聚银彩注册-| www.720112.com-快三近五期开奖号码| www.87723.cc-太阳2彩票-| www.209259.com-快三如何能稳赚不赔| www.168786.com-安徽快三开奖结果快| www.333024.com-彩票的数学规律| www.494588.com-足彩混合关一定牛| www.639854.com-东方亮彩副总离职| www.059127.com-彩神彩专栏-| www.492347.com-七彩字体软件|