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.947617.com-湖南彩票网-| www.9601.loan-内蒙古彩票中奖事件| www.287332.com-贵州快三官网| www.751933.com-爱彩导航线路| 金冠彩票www.49956z.com| www.713839.com-旭彩网是不是骗人的| www.865698.com-福州彩票店转让| www.555013.com-彩票中5亿-| www.844139.com-桐梓彩票店转让信息| www.38st.com-七星彩360包码| www.7006.net-彩票红包怎么领| www.921519.com-彩神每日预测| www.999533.com-福彩形态分析| www.783009.com-福运来彩票坑玩家吗| www.82439.com-褔客来彩票-| www.260208.com-彩票中奖符-| www.52048.com-中大奖的彩票网登录| www.5261.xyz-中国体育彩票大乐头| www.277230.com-官方彩是什么意思| www.136297.com-梦想彩票站苹果版| www.732681.com-佰万彩票下载| www.552639.com-法国酷彩官方旗舰店| www.693034.com-手机自助购彩| www.365709.cc-彩铅自学视频教程| www.394466.com-足彩复式投注表金额| www.858285.com-高频彩有托吗| www.930189.com-90彩票是什么平台| www.fv19.com-投资福彩快三违法吗| www.635094.com-七彩阳光分视频| www.909554.com-福彩3d资料大全| 500万彩票www.500pt.com| www.72fv.com-体彩4+1是几等奖| www.306549.com-澳发彩票是不是真的| www.417100.cc-竞彩开奖时间表| www.525792.com-沈阳彩票机器转让| www.263582.com-中彩网大乐透走势图| www.931929.com-福彩快三能否网上买| www.857818.com-福彩动物总动员攻略| www.17539.cc-中国彩软件下载| www.18263.com-京京彩票-| www.80689.com-看体彩走势图| www.049652.com-怎么去买彩票| www.83pq.com-今天福彩脑筋急转弯| www.4764.com-彩民中奖无法兑奖| www.60193.com-福彩猜2d玩法| www.023813.com-一分快三提前开奖网| www.936795.com-七乐彩中奖奖金查询| www.4640.vip-福利彩票站提成多少| www.001975.com-深圳市体彩中心官网| www.153306.com-时时彩独胆稳定方法| www.45641.cc-福彩三d图-| 彩69www.022184.com| www.97952.com-138彩-| www.907.in-人生没有彩排| www.760152.com-北京pk拾彩票软件| www.858849.com-重庆七星彩开奖时间| www.942076.com-陕西省福彩网| www.998345.cc-快三单双大小计划网| www.df17.com-新湖北快三-| www.705967.com-易发彩下载-| www.954997.com-即开快彩-| 网易彩票www.077wy.com| www.fo65.com-中国体彩网唯一官网| www.874799.com-彩吧图谜第五版| www.ad28.com-体彩任选3-| www.16mx.com-uk彩-| www.0675.xyz-申请福利彩票店流程| www.987326.com-福彩大乐透-| www.bn31.com-下彩彩票app| www.g91.club-彩宝网大乐透| www.47ny.com-彩41彩票-| www.lz41.com-竞彩足球推荐软件| www.21jc.com-香港意大利彩金价格| www.869949.com-彩票计划员都在国外| www.971529.com-附近彩票站-| www.t23.club-中彩网七乐彩预测| www.575755.com-哪儿有平台买体彩| www.732028.com-河南省各地彩礼| www.809064.com-老彩民平台-| www.539045.com-乐盈彩下载-| www.580609.com-体彩专管员双休吗| www.681560.com-豪彩怎么下载| www.751909.com-新版跑狗图牛蛙彩票| www.844563.com-飞腾彩票官网| www.900715.com-贵州爱彩乐-| www.988086.com-必中彩票出现漏洞| www.298561.com-甘肃省体彩兑奖地址| www.565693.com-99新彩吧-| www.657025.com-93彩票网是真的吗| www.732163.com-临朐彩礼聘礼订婚| www.797693.com-彩民彩票撤销订单| www.874903.com-有游彩票吧-| www.964451.com-360彩票比分直播| 大赢家彩票www.590791.com| www.76av.cc-动物彩票开奖走势| www.42uy.com-查询彩票中奖软件| www.216558.com-马来西亚南洋彩| www.78891.com-福彩3d开奖书| www.59us.com-体彩兼营店与专营店| www.491302.com-福彩3d真经布衣图| www.950453.com-竞彩亏盈公式| 彩之家www.34czj.com| www.702250.com-竞猜足彩胜平负推荐| www.713957.com-福彩3d任意和差表| www.25lz.com-星空彩票平台正规吗| www.4114.cm-南方双彩缩水软件| www.929626.com-香港牛哇彩票资料| 吉利彩票www.80065k.com| www.487724.com-网络彩票有什么漏洞| www.896888.cc-买彩票能中大奖真相| www.984509.com-官网彩8彩票| www.co49.com-黑彩报警-| www.0030.cm-中不到彩票-| www.12332.com-手机彩网-| www.63817.com-足彩竞猜胜负任9| www.367973.com-好看的彩铅配色| www.964147.com-86彩票人工计划| 财神网www.29277y.com| www.712394.com-快三输钱怎么报警| www.322635.com-彩票开奖号123| www.719311.com-广东福利彩票| www.671982.com-类似彩宝彩票的软件| www.862537.com-今天彩票开奖号| www.962409.com-福彩三的和尾走势图| www.da86.com-彩神1软件下载| www.446.tv-鸿彩靠谱吗-| www.12161.com-福彩规律最准| www.e14.bid-海口七星彩现场直播| www.576451.com-聚星彩票下载地址| www.005119.com-u588发发彩-| www.843556.com-福彩公益语-| www.971343.com-彩票密码线原理| www.ag97.com-123彩票走势图| www.o30.in-分分彩通用稳赚方案| www.724422.com-彩票破产-| www.812548.com-福彩3d技巧书| www.893388.com-超级七乐彩助手| www.954979.com-快三是黑彩吗| 彩客博www.8667m.com| www.bw11.com-网上彩票帮投是什么| www.qx76.com-三分时时彩全计划| www.871390.com-人人彩票怎么样| www.958804.com-多彩网3d字谜| 彩皇网www.553398.com| www.hc37.com-33.cc彩票-| www.802274.com-吃鸡精彩视频| www.57gh.com-福彩36迭7开奖| www.2656.vip-好运彩-登录| www.697278.com-七星彩怎么样选号| www.848568.com-nba每日推荐竞彩| www.954802.com-彩票雙色球-| www.200027.com-体彩开奖公告| www.711922.com-万豪国际彩票下载| www.651503.com-彩票最好的软件| 云中彩www.400322.com| 快彩网www.378015.com| www.2153.win-吉林快三计划赢| www.446320.com-体彩3d开奖结果l| www.138503.com-互娱彩票靠谱吗| www.67466.cc-赊销彩票是否违法| www.fx18.com-玩彩票的群号| www.54744.com-微彩吧在哪里下载| www.138533.com-分分时时彩开奖号码| www.211890.com-上海体彩11选五开|