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.523105.com-app刷彩-| www.n25.com-中国彩票创始人| www.281232.com-下载时时彩开奖| www.2927.biz-体彩门店图片| www.946864.com-上海彩钢板生产厂家| 9号彩票www.80767s.com| www.934100.com-福利彩票精准预测网| 网易彩票www.506931.com| www.248888.cc-江苏快三号码统计| www.930625.com-彩票税-| 彩票坊www.412228.com| www.738870.com-彩球彩票-| www.849690.com-竞彩篮球网站| www.937072.com-福利彩票开奖福| www.990964.com-浙江风采网竞彩区| www.ha73.com-pk868彩票-| www.14bz.com-乐彩汇app-| www.515982.com-中国传统色彩图鉴| www.cw07.com-十大私彩平台介绍| www.95zv.com-深圳鸿彩印刷| www.127137.com-中学画彩铅风景视频| www.60gl.com-工商银行彩票平台| www.767819.com-淘彩app怎么样| www.886046.com-彩虹天堂有什么含义| www.978334.com-梧桐彩票-| www.dl92.com-体彩玩法-| www.7qc.com-福彩体彩招牌图片| www.8424.cm-m8彩票有漏洞吗| www.95701.com-中国最早彩票| www.15753.cc-动漫彩铅颜色搭配| www.019509.com-福彩三d开奘结果| www.181211.com-中彩骗局-| www.315664.com-彩票开奖查询360| www.372342.com-安徽3注彩票中奖| www.550876.com-彩票分析数据| www.69518.com-凤凰彩票网提不了款| www.136561.com-成功彩票是黑平台吗| www.222339.com-快三晚上-| www.5842.xyz-体彩扑克牌豹子| www.693688.com-玩彩票wcpcc| www.mn5.cc-搜河北快三开奖结果| www.137744.com-排列三预测新彩网| www.443885.com-体彩6+1开奖| www.1060.tv-香港赌圣牛娃彩票| www.286330.com-彩票网站送彩金| www.566.cc-51彩虹下载-| www.ci37.com-吉林快三我输80万| www.ag99.com-体彩迷画谜-| www.112147.com-三亿彩票-| www.43hz.com-有没有网上卖彩票的| www.353094.com-腾讯分分彩9码挂机| www.95kx.com-京东快彩提现| www.390677.com-缅甸时时彩合法吗| www.046943.com-网络e彩票平台| www.259937.com-福彩大厅-| www.30li.com-彩虹代刷app生成| www.959336.com-十分彩票-| www.cp6322.com-福彩手机投注客户端| www.613968.com-c彩68-| www.680618.com-一号彩票店-| www.751089.com-彩票软件邀请码| www.127030.com-彩虹六号季票没了| www.290117.com-海南彩票四个数字的| www.443961.com-注册即送18元彩金| www.89752.com-九龙彩票软件| www.864738.com-人人中彩票官网地址| www.687333.com-体彩官网世界杯| www.780908.com-二八彩票台-| www.858145.com-福彩整顿了吗| www.945889.com-竞彩2串1稳赢模式| 移动彩票www.cszb6.com| www.ff56.com-大赢家5分钟彩票| www.zi78.com-手机彩票客户端| www.27au.com-万彩吧3d奖-| www.99sc.com-彩神彩票黑钱吗| www.165857.com-芜湖市福彩中心在哪| www.254045.com-乐盈彩票跑路| www.317366.com-中国福彩网3d| www.809869.com-中彩票官-| www.596038.com-福豪彩安全不| www.132053.com-娘家只收彩礼不陪嫁| www.093037.com-彩色水泥路面做法| www.187913.com-北京快三走图一定牛| www.64vb.com-2d福彩多少钱一注| www.8626.cm-河南体彩排五| www.848857.com-福彩生活即开型彩票| www.2369.net-快三稳赚不赔视| www.669291.com-彩吧怪字神帖会员版| www.770330.com-天下好彩123| www.836393.com-本期四不象彩图| www.895609.com-大中华彩票官网| www.953841.com-牛牛彩票-| 福彩www.26878w.com| www.cp9579.com-中彩网是不是合法的| www.047468.com-乐彩论坛一手机版| www.145934.com-谁有福彩3d交流群| www.5984.live-19050体彩-| www.861156.com-北京时时彩开奖走势| www.956795.com-彩色蚕宝宝有毒吗| 幸运彩票www.561502.com| www.094320.com-排列3彩吧图库| www.879616.com-七乐彩五百期走势图| www.951475.com-信誉彩票网站推荐| www.996851.com-下载福彩走势图| www.he31.com-彩29彩票-| www.10iu.com-租彩票网站-| www.029.mobi-九州彩票如何| www.04357.com-3d预测彩吧论坛| www.861822.com-腾讯十分彩开奖网站| www.505634.com-炫彩hd动态壁纸| www.124676.com-彩票漏洞吧-| www.33224.cc-全民彩票赚钱吗| www.89077.com-盛大彩票下载安装| www.410377.com-爱尔兰有哪些彩票| www.533357.com-彩票店上班-| www.501.cm-吉祥彩登录网站| www.577810.com-快三彩票内蒙| www.789412.com-彩色耐磨地坪| www.884650.com-百度上买彩票| www.972498.com-福彩p62开奖查询| 500彩票www.942677.com| www.891645.com-彩票统计app| www.968905.com-不要买彩金-| www.cai8200.com河北快三推荐号今天| www.yv13.com-彩票归邓家管| www.05tu.com-山东福彩双色球单式| www.3757.cn-彩帝彩票是规网站吗| www.668293.com-怎么分辨彩票黑平台| www.766486.com-福彩3d小号走势图| www.833070.com-彩77老版本-| www.289677.com-乐彩提现不了怎么办| www.73or.com-彩票3d推荐号| www.348455.com-彩票活动图-| www.152159.com-网络彩票真假| www.523576.com-时时彩微信群码| www.577500.com-七星彩能异地兑奖| www.642742.com-900万彩票平台| www.727218.com-神彩网app-| www.819872.com-上海体彩客服电话| www.877868.com-福彩22选五中奖号| www.928779.com-排列五和七星彩奖表| www.971995.com-彩票陷阱-| www.cb13.com-河南福彩快开彩| www.0216.com-福彩在线正规吗| www.352985.com-天彩翼飞1639| www.756461.com-福彩3d实票详情| www.913331.com-彩客网假的-| www.993080.com-梦见选彩票数字| www.em36.com-福彩3d幸运号| www.yj01.com-腾讯一分彩官方开奖| www.151694.com-五行数字与彩票| www.669050.com-北京彩钢压瓦机| www.781876.com-彩票走势分析方法| www.254090.com-大发快三18种算法| www.pw51.com-三分彩是正规的吗| www.3198.wang-体彩7星彩今天开奖| www.836186.com-手机顺风彩票| www.352295.com-青蛙彩票怎么下载| www.280496.com-计划网时时彩全天| www.052335.com-彩票世家购彩大厅| www.859793.com-最新体彩排3试机号| www.53689.cc-时时彩庄家追杀你| www.8741.loan-重庆时时彩又卡奖了| www.068712.com-鸿彩骗局-|