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.670049.com-风彩的意思有几种| www.703156.com-湖南省福利彩票网| www.816369.com-云南时时彩官网| www.903791.com-万豪彩票助手| www.979896.com-竞彩胜平负比分| www.xn5.com-贵州体彩十一选5| www.958804.com-多彩网3d字谜| www.28272.cc-常州市福利彩票中心| www.101714.com-信誉高彩票网| www.100085.cc-网络极速3d彩票| www.706422.com-时时彩论坛贴吧| www.839023.com-玩快三客有什么技巧| www.979220.com-香港好彩烟-| www.dk78.cc-马来西亚乐和彩| www.d14.net-软件彩票-| www.514323.com-苹果xr原彩显示| www.188533.cc-北京快三代理| www.354440.com-彩票排列五预测| 大赢家彩票www.399010.com| www.jg45.com-吉林快三大小破解| www.hi38.com-重庆时时彩幕后控制| www.711442.com-3d天天福彩-| www.cp6226.com-五分彩在线计划| www.947972.com-彩票o2o网购平台| 手机购彩www.257188.com| www.227456.com-台湾快三秒奶茶| www.883113.com-有人带你投彩| www.032969.com-亿乐彩靠谱吗| www.095985.com-官方网上购彩平台| www.195856.com-彩票开奖双色球今天| www.295666.com-彩票app提现失败| www.477966.com-时彩族在线计划| www.568428.com-福彩3d断组公式| www.638444.com-天吉福彩彩票论坛| www.917886.com-彩虹宝宝第二季| www.586954.com-竞彩网上哪里能买| www.569247.com-福彩丹东图-| www.65rz.com-十四彩推荐-| www.952960.com-广东新粤彩每期报| www.55me.cc-大信彩票平台怎么样| www.111313.com-094彩票-| www.2898.top-诺亚彩票下载| www.zj73.com-上海体育彩票11| www.311556.com-五福彩票安卓版| www.920538.com-彩票一分快三软件| 亚投彩票www.ya150.com| www.9275.biz-3分彩计划群| www.102978.com-易中奖彩票app| www.8ol.com-彩票机键盘字母用途| www.68917.com-新盈彩正规吗| www.139274.com-彩票365下载| www.90mv.com-沁县彩英说唱| www.6385.cn-财富专业复式福彩| www.377948.com-体育彩票机额度| www.848862.com-七乐彩中中奖图| www.966530.com-宝马彩票网址多少| 盈利彩票www.359629.com| www.962507.com-进球彩官网-| www.cp5663.com-快三游戏名字叫什么| www.4847.vip-山西彩服务合法么| www.21623.cc-加网友教彩票| www.53oa.com-体彩店位置-| www.1316.me-全球博彩公司排行榜| www.12992.cc-中体彩唯一官网| www.95509.com-足彩直播吧-| www.778402.com-时时彩骗局揭秘| www.225616.com-重庆时时彩讨论吧| www.02365.cc-今日内蒙快三走势图| www.477.bid-六和彩17期| 55彩票www.755914.com| www.884.cm-彩铅手绘教程入门| www.066797.com-送彩金的网站排行榜| www.90921.com-福彩平台是骗人的吗| www.874159.com-上海快三推荐和值| www.4306.vip-2019双彩论坛| www.689558.com-山东齐鲁风采七乐彩| www.00947.com-凤彩网首页彩吧| www.398061.com-网络购福利彩票| www.778062.com-福彩传真-| www.031037.com-相亲网上彩票托| www.751868.com-壹号彩票-| www.769023.com-凤凰娱乐彩票下载| www.972736.com-竞彩让球胜平负网| www.495377.com-全球线上博彩占比| www.254629.com-重庆时时彩春节停售| www.789763.com-竞彩怎样找到大客户| www.871619.com-手机彩票缩水| www.948377.com-2019网上购彩票| www.995457.com-新浪彩票直播| www.ac08.com-河南快三走势图彩票| www.739904.com-496cc彩票官网| www.c49.in-306官方彩票苹果| www.80990.cc-福彩彩票机键盘图| www.30961.com-神彩通代理版| www.zs26.com-篮球体彩怎么买| www.506279.com-彩票ddcc-| www.619709.com-福彩3d聪明组合| www.687502.com-福彩刮刮乐试刮| www.800651.com-福利彩票布衣图库| www.893111.cc-休育彩票大乐| www.949805.com-k8彩不给提现| www.995034.com-最近福利彩票事件| www.oi7.com-甘肃福彩快三01| www.hv72.com-乐彩网走工具图表| www.0172.vip-网上国彩是不是骗局| www.772852.com-大发时时彩有漏洞吗| www.114222.cc-手机福彩官网下载| www.245674.com-易彩堂彩下载| www.072075.com-竞彩和赌博的区别| www.030862.com-彩61安全吗-| www.134626.com-好彩紫绿双爆| www.235791.com-体彩七位数今晚预测| www.317765.com-福彩3d二等奖规则| www.487228.com-足彩赔率分析教程| www.853785.com-天津时时彩开奖重复| www.65993.com-福彩和值大小| www.1178.cc-体彩大乐透品牌口号| www.19657.cc-优乐娱乐时时彩平台| www.809732.com-必赢彩票刷流水| www.0813.bid-网上足彩购买方法| www.030852.com-彩61彩票是真的吗| www.072553.com-美国彩票大奖排名| www.uk79.com-一分快三开奖豹子号| www.075788.com-江西时彩开奖记录| 网易彩票www.560726.com| www.253705.com-支付宝怎么买彩票| www.257867.com-106老版本彩票| www.86vu.com-彩票套利犯法吗| www.769708.com-四川好彩头-| www.950441.com-乐彩客苹果版怎么下| www.416657.com-彩红是什么颜色| www.599103.com-福彩3d三-| www.987650.com-福彩刷流水倍投| www.an22.com-彩71下载-| www.rg26.com-七星彩复式投8| www.859122.com-彩神争8邀请码| www.922981.com-白小姐特马信封彩图| www.976319.com-河南彩礼一般给多少| 成功彩票www.le33.cc| www.86046.cc-彩涂钢板标准| www.805056.com-手机竞彩软件| www.314703.com-中国竞彩网首| www.708731.com-赢发彩票真假| www.631603.com-七星彩私彩案| www.203456.com-福彩5d怎么选| www.cp6055.com-3d福彩-| www.607302.com-七星彩论坛海南彩区| www.39759.cc-江苏快三走视| www.89388.com-下载500购彩| www.270.org-湖南彩票论坛| www.196815.com-快三彩票规律查询表| www.282220.com-中国彩票-| www.550601.com-七星彩对联图片大全| www.651002.com-创意水彩风景画| www.700632.com-体彩价格表-| www.759135.com-彩薇花化妆品| www.821855.com-在彩票软件上玩彩票| www.28988.com-彩神v8是骗局吗| www.68915.cc-安徽快三即时开奖| www.2702.wang-v8彩票平台可靠吗| www.8020.xyz-今日头条福利彩票| www.25725.cc-菜鸟彩票平台| www.622598.com-3d彩报图今天今日| www.626549.com-彩票拖胆价格表|