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.999818.com-福彩排列五游戏规则| www.jb47.com-中国足彩网赛事中心| www.6ai.com-吉林省福利彩票地址| www.76hb.com-兴华彩票app下载| www.2285.site-福彩三d黑圣手字谜| www.8604.com-599彩票下载安装| www.31927.cc-王牌彩票怎么样举报| www.81578.cc-网络彩票赌博输好惨| www.031312.com-黑彩平台代理好吗| www.106045.com-手机制作彩票走势| www.182526.com-网络彩票快三| www.261050.com-快3彩票有没有规律| www.506734.com-福彩开将结果奖结果| www.584522.com-苏宁彩票可以买吗| www.659864.com-彩票查看双色球| www.773017.com-体彩9场胜负| www.865318.com-福彩3d遗漏-| www.935603.com-时时彩跨度定胆码| www.994507.com-快三兑奖期限多少天| www.hq4.com-河南快三二码遗漏| www.py67.com-8080cc彩票-| www.05ta.com-福彩每天开奖多少号| www.81vv.com-兑兑彩票app| www.2070.tv-旋风彩虹机厂家| www.8057.vip-创意水彩建筑| www.29992.com-亿彩彩票网-| www.75825.com-凤凰购彩平台怎么样| www.029645.com-彩神熊掌号-| www.108714.com-乐发彩票手机软件| www.179593.com-五分彩全天计划| www.255270.com-皇马彩票注册送20| www.329975.com-微信群北京快三大小| www.406353.com-彩票135app-| www.514688.com-澳洲lotto彩票| www.586262.com-彩播app有病毒吗| www.662716.com-如意彩票免费计划| www.739338.com-大象彩票网-| www.9638.org-今日体彩胆码| www.518954.com-网彩还有可能开售吗| www.583125.com-福彩二元网-| www.649122.com-博彩社区网-| www.28718.com-中国体彩排列三字谜| www.774042.com-香港博彩堂-| www.883194.com-快三黑彩私彩平台| www.974018.com-浪琴一天快三秒| www.js.cc-选彩票用什么软件好| www.oh17.com-福彩3d彩票两元网| www.9cp.cc-数字0到9彩票| www.67fo.com-中彩网手机客户端| www.0793.date-玩网上彩票犯法吗| www.8550.org-游戏机里的彩票| www.38525.cc-88彩票预测-| www.82809.com-福彩3d靠谱吗| www.033391.com-中信彩票是真的吗| www.108173.com-时时彩两个平台对刷| www.175951.com-买高频彩必输原因| www.302557.com-308彩票苹果| www.369845.com-足彩封盘-| www.460031.com-福彩3d无错断组| www.545979.com-彩票店装修样板| www.657020.com-黑彩稳赚计划| www.738814.com-大发快三怎么盈利| www.806626.com-好彩一开奖查询结果| www.878591.com-内蒙古体彩网下载| www.970487.com-福彩排烈3-| 大赢家彩票网www.715121.com| www.iz85.com-福彩双色球开奖时间| www.zk08.com-彩票兼职群-| www.23dd.com-天津体彩中心主任| www.883.date-福彩3d预测app| www.4817.com-福建彩民31先7| www.9906.cm-中国竞彩网专家推荐| www.62889.com-最新七乐彩开奖结果| www.022272.com-注册彩票送体验金| www.089411.com-全国快三最多的网站| www.185736.com-福彩快3中奖查询表| www.269501.com-彩票是真是假| www.380480.com-七乐彩特别号走势图| www.501232.com-879彩票官网| www.567842.com-今日体彩推荐号码| www.637520.com-彩虹6号直播| www.739503.com-萬博彩票-| www.804946.com-福利彩票有追加吗| www.873950.com-众彩网首页网| www.962269.com-彩神vii注册| 非凡彩票www.77210g.com| www.fa91.com-瑞彩祥云江苏快3| www.uw15.com-uu快三是正规的吗| www.04lp.com-体彩10选5-| www.66yt.com-3d游彩网-| www.0156.cn-七彩色的寓意| www.8880.live-2019竞彩调整| www.69931.com-彩虹8一分快三| www.025473.com-快乐分分彩人工计划| www.093004.com-工地临时彩钢瓦围墙| www.153215.com-喜乐彩是不是骗人的| www.254441.com-分分时时彩龙虎技巧| www.319220.com-湖壮快三开奖结果| www.380979.com-体彩11选5预测| www.511763.com-彩客网电脑版比分| www.576124.com-体彩排列三三码遗漏| www.638727.com-福彩资金包括| www.735545.com-中国彩吧更慬彩民| www.799951.com-彩票数字买法| www.868128.com-周三是什么彩票开奖| www.950343.com-上期七星彩开奖| www.987911.com-中彩网网页版登陆| www.cai8222.com分分快三最坑| www.jd54.com-竞彩app开发| www.yp07.com-十二生肖彩票网站| www.14np.com-去柬埔寨做博彩客服| www.165.com-彩库宝典开-| www.2966.in-众盈彩票客户端下载| www.7991.cn-开机号中华彩票网| www.22291.cc-山东福彩官方下载| www.58403.com-釉中彩好吗-| www.037715.com-盈利彩票软件| www.117461.com-体彩下载哪个软件好| www.178063.com-北京快三开奖时间| www.238005.com-万家彩票官方首页| www.305765.com-彩票一般买哪个好| www.367852.com-彩芽はる愛?緊縛| www.444946.com-爱彩乐投注技巧| www.531251.com-9彩下载-| www.662175.com-竞彩冷门神单| www.738136.com-qq群玩彩票-| www.800570.com-快钱彩票怎么玩法| www.869400.com-够力七星彩安装下载| www.948651.com-手机怎么样买彩票| www.984722.com-福利彩8是不是真的| www.vt3.com-海南私彩玩法| www.oe74.com-长春福彩中心网站| www.z29.club-彩票之王-| www.46ev.com-郑州体彩中心地址| www.105.net-泉州体彩网-| www.2544.net-51时时彩官方网站| www.7345.vip-彩六要挂加速器吗| www.16895.cc-彩神平台不给提现| www.52037.com-广西双彩走势图表| www.87816.cc-怎么才能戒掉玩彩票| www.031979.com-我爱彩票软件| www.095052.com-新彩吧开奖结果| www.144899.com-安微快三爱乐彩| www.316654.com-新浪爱彩不能提现| www.372145.com-彩票每日签到送现金| www.450125.com-49ycc彩天下| www.526361.com-世界杯胜负彩规则| www.629565.com-彩色复印机排行榜| www.687874.com-今天的彩民乐树图| www.751824.com-①号彩票官网| www.842032.com-鑫彩网安全吗| www.894794.com-七星彩开奖结杲| www.951156.com-中彩网三d北斗分析| www.994815.com-江苏快三中奖查询| www.cai7000.com快三彩票下载安装| www.hb88.cc-大发彩app下载| www.uy24.com-彩票选号技巧6减2| www.4pv.com-人人体育彩票可靠吗| www.45yv.com-广东彩票20选8| www.007.la-体彩和值遗漏分析| www.2037.org-二四六好彩资料大全| www.6318.cc-双色球福彩双色球| www.02851.com-爱中彩网站-| www.025439.com-宁夏银川仟彩摸吧|