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.507986.com-刚力彩芽和纱荣子| www.cp3573.com-大发快三计划预测| www.5288.com-分分彩收益-| www.917505.com-3d多彩颗粒漆| 爱彩www.015ac.com| www.sz8.com-彩票开奖查询公告i| www.587636.com-万彩吧开奖查询3d| www.285506.com-发彩网彩票注册| www.828239.com-吉彩宝官方下载| www.651702.com-黑彩平台那好信誉好| www.720087.com-一分幸运七星彩| www.585630.com-国外彩票代购| www.1874.cc-彩票销售平台有哪些| www.633433.com-买彩票到哪里买安全| www.533492.com-500彩票网试玩| www.93832.cc-北单足球彩票| www.231762.com-福彩3d字谜字画| www.99286.cc-360中彩网-| www.240744.com-中彩社区娱乐| www.67211.cc-河南安阳彩票站中心| www.065454.com-河南信阳彩票大奖| www.4867.biz-彩票论坛幸运飞艇| www.du04.com-安徽快三今天推荐号| www.zm61.com-彩调双彩莲-| www.30ld.com-彩厍宝典大全| www.88711.cc-九彩网站app| www.069984.com-彩神软件安全吗| www.43rq.com-福利彩票30万刮奖| www.o51.com-数学高手买彩票| www.415668.com-红树林彩票客户端| www.532839.com-体彩7星彩按顺序吗| www.610758.com-体彩怎样看中奖号码| www.681549.com-豪彩娱乐官方网站| www.756813.com-3号彩票官网| www.824710.com-湖北彩票作弊| www.890389.com-全民彩票网app| www.954606.com-体彩今日开奖结果| 中彩网www.71233y.com| www.030797.com-冈易彩票双色球预测| www.121635.com-时时彩开奖历史数据| www.189184.com-澳门快三开奖结果| www.3772.xyz-南国彩票排列五| www.3135.xyz-彩票看走势有用么| www.560952.com-彩票在五行属什么| www.54kr.com-105彩票钱安全吗| www.jx26.com-快三和值表奖金图片| www.240448.com-四季彩怎么提现不了| www.72hd.com-竞彩串关计算表| www.321172.com-彩票开奖3d开奖号| www.326275.com-宝彩网是真的吗| www.04999.com-高腾体育彩票终端机| www.61704.com-彩民中奖故事| www.018994.com-苏州体彩网官网| www.66523.com-时时彩的网址是多少| www.704007.com-竞彩网比分澳| www.950490.com-乐彩网官方版| 亿万彩票www.630565.com| www.a83.cc-977彩票软件下载| www.223752.com-官方福彩幸运快三| www.199311.com-广西快三是什么| www.274918.com-分分时彩下载| www.285803.com-网上做彩票-| www.522785.com-世界杯体彩分析| www.6op.com-博雅彩票苹果版| www.9249.xyz-微信登陆彩票| www.67792.cc-体育博彩业分类| www.511683.com-时时彩真的我输怕了| www.843997.com-足彩就是输钱| www.837.space-时时彩网易开门彩| www.737062.com-上海福彩中心投注| www.891516.com-腾讯qq彩票安全吗| www.971450.com-88彩票网站-| www.cp7176.com-网上买彩票江苏快三| www.pt60.com-彩票2元网走势| www.09ry.com-双色球字谜彩吧论坛| www.96je.com-高频彩最低可投多少| www.35874.com-123123彩票-| www.56329.com-中彩网3d预测分析| 大赢家彩票平台www.926013.com| www.537970.com-福利彩票骗人吗| www.714568.com-彩神争霸软件| www.152817.com-126官方彩票注册| www.pu10.com-广西快三害人输惨了| www.57xn.com-厦门体彩转让信息| www.2311.com-3d彩吧图库今天| www.967.in-七乐彩出球先后顺序| www.vc32.com-下载河北快三| www.589176.com-彩票究竟是不是骗局| www.2977.space-福彩3d和直选算法| www.287972.com-中国福利彩票开奖3| www.665750.com-彩票站挣多钱| www.020949.com-众彩网是合法平台吗| www.366114.com-自学彩铅画的app| www.9415.loan-彩票冷热分析软件| www.95136.com-彩票一等奖领奖程序| www.994893.com-天津体彩11远5| www.fp05.com-足球彩票怎么玩| www.zy40.com-大公鸡七里彩下载| www.0389.in-发彩网8828-| www.bh99.com-福彩快三群骗局揭秘| www.qc22.com-577彩票网-| www.w92.org-打时时彩翻身| www.40dp.com-宁波体彩中奖信息| www.539721.com-天津彩民之家app| www.440.tv-够力七彩票奖表下载| www.463062.com-环球国际彩票官网| www.562719.com-乐彩论坛福彩| www.638021.com-色彩风景画-| www.207679.com-手机彩票过滤工具| www.337228.com-伯爵彩票官网下载| www.534325.com-电玩城彩票机技巧| www.656276.com-福彩3d合尾走势图| www.769506.com-盈彩彩票真的假的| www.755.cm-时时彩结果走势图| www.323288.cc-百度乐彩首页| www.378719.com-周口体彩中心在哪| www.478600.com-5号彩票网-| www.332841.com-陕西十分彩-| www.488140.com-e乐彩票app-| www.583050.com-制作彩票走势图| www.52415.com-6彩库图-| www.908576.com-安徽芜湖快三开奖| www.60gt.com-体育彩票免费推荐| www.87709.com-大资本彩票是怎样的| www.8384.net-快三猜一个号规则| www.054829.com-3d通福彩计算软件| www.726684.com-玩转彩票app下载| www.807549.com-彩博汇-| www.cai775.cc-快三技巧规律| www.or80.com-靠谱的彩票软件公司| www.106290.com-国外彩票有哪些| www.964047.com-14场胜负彩怎么买| 乐彩网www.lcw199.com| www.539975.com-姜丽谢俊娟休闲快三| www.119120.com-u9彩票注册登录| www.056228.com-湖南彩票官网| www.539392.com-彩票店适合开在哪里| www.10828.com-567时时彩-| www.42vb.com-手机彩票开奖号码| www.984263.com-广州鸣彩联系电话| www.ub71.com-今天七彩奖开奖结果| www.58bt.cc-百宝电子走是图彩票| 500彩票网www.97655e.com| www.663686.com-博盈彩票官方网站| www.435813.com-彩凤是什么神兽| www.508785.com-上海福彩3d走势图| www.352559.com-上海福彩基诺| www.632726.com-快三末班车几点| www.51121.cc-淘宝彩票网七星彩| www.8750.org-休彩开奖号码| www.284959.com-湖北快三今日跨度| 华彩www.71399r.com| www.02kh.com-彩典宝库苹果| www.91iw.com-腾讯分分彩倍投技巧| www.344028.com-褔利彩票开奖杳询| www.865116.com-下彩触屏-| www.951394.com-500彩票aqq-| 亿彩彩票www.588yc.com| www.dn50.com-买彩票中大奖的咒语| www.2je.com-团彩网能买彩票了| www.972693.com-好运彩平台正规吗| www.mm75.com-500彩快3下载| www.1wm.cc-彩票快乐十分玩法| www.280006.com-335彩票平台|