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天

知道了
1分快三 www.1999.live-幸运5星彩走势图| www.565831.com-怎样下载金彩网| www.760480.com-诚信彩票官网| www.335058.com-福彩快三口诀| www.637342.com-七彩电量显示| www.568773.com-m8彩票一彩种| www.718138.com-彩库宝旧版下载安装| www.870742.com-cp彩票平台-| www.989323.com-中彩威视-| www.o92.com-彩票中奖归属人| www.0259.cn-时时彩奖金多少| www.218756.com-福建省福彩双色球| www.574141.com-中信福彩app下载| www.827515.com-三分钟时时彩| www.964202.com-彩票翻倍公式| www.43455.cc-十一选五旺彩计划| www.420186.com-澳客彩票赢平台| www.216295.com-体彩竞彩玩法介绍| www.877862.com-福彩20选5-| www.t12.com-支付宝彩票最大奖| www.2707.cn-正规彩票app排行| www.9944.biz-七星彩票今日开奖| www.425850.com-足彩怎么玩才能稳赢| www.025429.com-易彩一彩民福地登录| www.972220.com-19029期七星彩| www.344528.com-彩票33可靠-| www.475338.com-彩票带人回血| www.581272.com-彩票查询开放接口| www.694836.com-什么叫投彩-| www.804976.com-蓝彩算加时吗| www.901786.com-福彩快三网上购买| www.982787.com-彩票留存率-| www.sa9.com-上海11选5彩经网| www.ym42.com-2元彩票开奖公告| www.64vb.com-2d福彩多少钱一注| www.761483.com-下载山东竞技快三| www.605311.com-苹果4s彩色膜| www.43455.cc-十一选五旺彩计划| www.062658.com-大发彩票是怎么赚钱| www.79nw.com-网易彩票怎么样| www.2577.com-中国彩票十大牛人| www.6513.top-体彩有哪些即开彩票| www.80762.com-查看3d天天福彩| www.118706.com-买大发快三的方法| www.cp2828.com-快三手机官方投注站| www.770969.com-118彩票网投平台| www.857393.com-有抢红包的彩票平台| www.38668.com-淘彩吧-| www.069695.com-彩神黑钱-| www.703945.com-王成周彩票密码表| www.949768.com-979彩票-| www.cp73.com-安微快三跨度走势图| www.582376.com-山东体育彩票贴吧| www.567633.com-23彩票开奖直播| www.94592.com-卡姿兰彩妆套装怎样| www.cp2918.com-快三高手传授经验| www.166616.com-快三平台怎么赚钱| www.278780.com-中彩网官方-| www.244480.com-易彩堂在哪里下载| www.167067.com-大发快三精准计划| www.288376.com-彩票摇奖模拟器| www.2979.cc-3d彩吧图库藏机图| www.ji52.cc-五分时时彩-| www.453923.com-推荐个足彩群| www.485183.com-青蛭彩票开奖现场| www.573379.com-澳门彩票真人| www.325239.com-大数定律与彩票| www.416444.com-福利彩票快三魔图| www.522859.com-360足彩竞彩下载| www.152205.com-锋彩直播手机版下载| www.411897.com-河内五分彩平台| www.339985.com-时时彩自动买号软件| www.311632.com-摇发彩快三-| www.08070.com-买彩票中奖的感觉| www.710715.com-皇朝国际彩票套路| www.387625.com-七星彩18002期| www.43na.com-竞彩6串50计算器| www.167814.com-快三平台所有网站| www.518602.com-江苏不再彩快3| www.586771.com-立彩彩票不能提现| www.874800.com-酷彩网-| www.37334.com-皇室彩票靠谱吗| www.76393.com-想中彩票什么病| www.261321.com-彩票源码-| www.55112.com-智赢竞彩-| www.592313.com-彩票软件送彩| www.508221.com-头彩网官网-| www.700555.com-大发云官方彩票| www.791644.com-五星乐彩可靠吗| www.875048.com-一张彩票的故事| www.969184.com-福彩基金效益如何写| www.fr9.com-159彩票app-| www.855273.com-网上福利彩票靠谱吗| www.931992.com-七星彩中三个多少钱| www.988300.com-甘肃快三走势与预测| www.ce55.com-玩快三能挣钱吗| www.714592.com-彩票资讯中国足球网| www.853286.com-拉菲2彩票-| www.975908.com-洛阳彩礼-| www.cp9388.com-快三单双关系加减一| www.h38.cc-中了七星彩怎么领奖| www.2475.cc-湖北精彩十分奖级表| www.28369.cc-彩票大乐透怎么玩| www.at56.com-湖北彩票开奖公告| www.pn68.com-体彩北京快三| www.m47.net-福彩十选五走势图| www.28tv.cc-网彩何时开售| www.868808.com-七星彩前4个规律| www.92ih.com-安徽快三网站| www.087826.com-网站快三押单双大小| www.73480.com-9万彩票下载安装| www.1763.vip-福利彩票去哪买| www.130671.com-捷豹彩票365网址| www.25nd.com-淘宝彩票网合法的吗| www.158878.com-贵州福彩3d-| www.an96.com-苏州福利彩票双色球| www.67im.com-太原体彩大奖| www.368163.com-彩铅排线技巧| www.xf74.com-广东福彩好彩3奖金| www.499739.com-韩国彩票一等奖| www.620609.com-彩票开奖查彩吧| www.555478.com-体彩排列5奖金多少| www.616254.com-体彩扑克牌中奖奖金| www.215709.com-福利彩票种类及玩法| www.69187.com-玩印尼五分彩下载| www.980768.com-吴江彩票店转让| www.wx27.com-玩彩票骗局-| www.25nl.com-彩票压大小方法| www.r18.pink-万禧彩票-| www.992125.com-七星彩的复拾怎么玩| www.d56.site-福彩3d漏洞-| www.77ys.cc-竞彩中奖后扣多少税| www.666086.com-下载福彩摇一摇| www.040851.com-足球博彩概率学| www.34125.com-搜索彩虹宝宝| www.94qn.com-logink彩-| www.5719.cc-彩票一群想不劳而获| www.509133.com-4157彩民红高手| www.324300.com-彩票大全网址| www.6307.top-彩吧3d图谜第五版| www.67906.com-黑客重庆时时彩软件| www.692.website福彩3d选号公式| www.5449.pw-彩38网页-| www.015844.com-幸运中彩票平台骗局| www.86643.com-衡阳福利彩票店| www.106189.com-90年代彩票-| www.843896.com-福彩题库-| www.951573.com-投彩是什么东西| www.qn46.com-今日新鲜事彩票3d| www.w27.cc-福彩精胆天下彩报| www.731645.com-湖北快三和值跨度| www.818582.com-体彩软件app| www.917398.com-私彩代理怎么提成| www.973264.com-彩虹岛稀有装备图鉴| 500彩票www.915231.com| www.tf80.com-时时彩不会亏的方法| www.23027.com-王者彩票怎么玩| www.005440.com-福建省福利彩票三d| www.071581.com-福彩3d开机号试| www.017318.com-cp彩票官网登录| www.093742.com-0567好彩提现| www.82315.com-福客来彩票登录| www.56399.cc-微彩吧安全吗| www.060391.com-幸运彩分分彩网址|