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.607320.com-中国中奖最多的彩票| www.1989.mobi-下载彩票bb网站| www.699603.com-快三交流群什么意思| www.802627.com-搜索福彩藏机图| www.589543.com-七星彩不分位冷热| www.922076.com-福利彩票自助售卖机| www.411399.com-彩管家官网-| www.28575.cc-快3真的是福彩吗| www.6pu.com-彩票中奖公司| www.973330.com-彩虹岛m-| www.041518.com-宏发彩票网最新地址| www.50712.com-福彩双色球查询| www.767086.com-凤凰网投港彩48倍| www.04854.com-快三选号助手app| www.901761.com-我在柬埔寨黑彩上班| www.cp7808.com-快三秒奶茶-| www.567044.com-k8彩票骗局-| www.979670.com-计划彩票聊天室| www.re83.com-七乐彩兑奖表| www.80by.cc-风凰彩票app| www.7271.cn-小米彩虹电量教程| www.31322.cc-彩票返点7怎么算| www.435656.com-福彩公众号是多少| www.653528.com-彩票徐州有多少中奖| www.219061.com-吉林快三和值图| www.2479.vip-中国福彩自助售票机| www.36604.com-下载澳彩体育彩票| www.104747.com-360足彩网-| www.39839.com-买彩票的地方经开区| www.104544.com-贵烟好彩牌香烟| www.095072.com-福彩p62网购| www.088305.com-足彩北京单场怎么玩| www.351530.com-优选彩店真的假的| www.568269.com-彩票是真的中不了| www.751014.com-今日快三甘肃走势图| www.315938.com-上海体彩兑奖| www.718389.com-聚财彩票合法吗| www.51393.com-禁止网络买彩票| www.047602.com-500万彩票比分直| www.161709.com-彩乐汇代理-| www.8051.in-超简单水彩画| www.948812.com-好运快三正规吗| www.cy81.com-彩吧论坛-| www.2ri.cc-体育彩票返点是多少| www.664277.com-赢彩王下载-| www.32875.com-河南省洛阳市彩礼| www.932763.com-神圣彩票网址多少| www.1895.cn-中彩网会员号是什么| www.33773.cc-美彩票-| www.96299.com-买彩票亏了几百万| www.964297.com-七星彩奖金规则| www.46po.com-网站买彩票靠谱吗| www.qh90.com-昨天开福利彩票中奖| www.8318.cc-彩票中大奖江西| www.227600.com-快3彩票正规| www.337299.com-长春黑彩庄家| www.560353.com-内蒙体彩官网| www.858922.com-二分快三计划| 818合彩www.www.9889hc.com| www.492370.com-手机黑彩平台漏洞| www.622115.com-五福彩票贴吧| www.81121.com-全民彩票用户注册| www.924994.com-福彩彩票走势图| www.77548.com-上海体彩发行中心| www.69dn.com-皇冠彩票是合法的吗| www.052917.com-彩票中奖就这几招| www.254472.com-好彩网骗局-| www.405118.com-体彩七星彩彩经| www.593589.com-七彩云乳业有限公司| www.992139.com-爱波网的足彩app| www.465368.com-包袱彩绘-| www.305786.com-有人想玩彩票吗| www.560740.com-环彩网网页版| www.7555.site-东方亮彩官网| www.am05.cc-购彩大厅360彩票| www.23iy.com-ok彩票真能赚钱吗| www.183575.com-官方彩票软件| www.981648.com-吉利彩票网靠谱吗| www.024596.com-彩神通内部四码官网| www.172023.com-快三开奖结果河南| www.309593.com-陕西福彩网-| www.418257.com-懂球帝足彩能提现吗| www.937272.com-鸿博彩票安卓下载| www.811838.com-火箭彩票vp版| www.878153.com-被彩票平台骗局| www.940773.com-众彩网彩票专家| www.994546.com-派彩网福彩三d| www.cg42.com-江苏快三登录平台| www.tt57.com-十分彩江苏快三诀窍| www.09ue.com-体彩大乐透几点封盘| www.92tu.cc-水星分分彩-| www.2704.xyz-v9彩票是官方网| www.8215.biz-玖富彩票江西快三| www.16076.com-3d乐彩静态版| www.758121.com-第一彩票官网| www.26ar.com-怎样用手机买快三| www.yj67.com-一分快三怎么倍投| www.29df.com-体育彩票怎么买足球| www.226053.com-福利彩票追号技巧| www.297099.com-3分彩玩法-| www.356243.com-助赢计划分分彩| www.767111.com-好运彩彩票可靠吗| www.898155.com-足球彩票专业术语| 500彩票www.3126x.com| www.706299.com-皇都彩票国际版| www.799109.com-网上可以开彩票店吗| www.502231.com-福彩套利-| www.918869.com-体育彩票模拟机选| www.qh3.com-一分快三太坑| www.58500.cc-2分彩官网-| www.1408.online福利彩票中奖计算| www.739661.com-竞速bb彩-| www.971252.com-福彩刮刮卡怎么玩| www.tb43.com-官方彩票有哪些彩种| www.4409.cn-福彩返奖率历史记录| www.73kq.com-京彩官方下载| www.137505.com-大成彩网是真的吗| www.730657.com-中国福利彩票第| www.840091.com-凤凰彩票快三| www.984076.com-3d彩票预测专家| www.134.cm-彩虹的约定律动| www.4826.vip-彩虹六号安装| www.9653.biz-免费下载万彩吧| www.vy37.com-大发快三经验技巧| www.32632.cc-河北各地彩礼价格表| www.491611.com-微信快频彩票| www.041113.com-今天广西省快三彩票| www.122125.com-9彩彩票ios-| www.196076.com-易彩娱乐登录福地| www.272788.com-福利彩票今日开奖号| www.175771.com-北京快三软件| www.086618.com-霞光溢彩-| www.71504.com-河南省福彩在哪兑奖| www.022739.com-福彩3d断组论坛| www.118573.com-境外彩票网站制作| www.023136.com-彩票的一些玩法| www.005504.com-14亿彩票app| www.279101.com-重庆时时彩网址官网| www.007891.com-彩票电子书-| www.640868.com-福建福彩时时开奖| www.727923.com-亿彩网手机平台登录| www.801362.com-好乐多彩票是真是假| www.873579.com-福彩三地发哥杀码| www.966239.com-福彩投注-| www.cp747.com-快三计划群真的吗| www.698475.com-嘉兴福彩中心电话| www.816339.com-河北快三分析大师| www.942628.com-重兴分分时彩| www.ts.com-中国竞彩网胜平负| www.888604.com-559彩票app-| www.963640.com-菠萝彩-| 新盈彩www.xinyc2.com| www.774042.com-香港博彩堂-| www.9477.cc-彩统计器-| www.053229.com-太原彩票站转让| www.7379.cc-彩票发展趋势| www.182114.com-彩票模拟选号器| www.069571.com-36选7好彩怎么买| www.329171.com-网上快三计划都是坑| www.969628.com-乐乐彩票官网| 大玩家彩票www.84499l.com| www.4824.vip-福彩3d天罡八卦胆| www.676643.com-彩票开奘大全| www.810780.com-福彩双色球走势玩|