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天

知道了
彩票123现在叫什么名字 www.626623.com-时时彩三胆技巧| www.gs0.com-北京快三走势图牛| www.782799.com-云南十一选五爱彩乐| www.870922.com-江苏快三彩票软件| www.961432.com-老梁说彩票-| 9号彩票www.80767a.com| www.lp14.com-中彩吧2020彩票| www.059813.com-吉林福彩中心官网| www.988770.com-微彩站app下载| www.ek01.com-彩吧试机号-| www.xs67.com-最好彩票软件app| www.18bn.com-福彩是当天开奖吗| www.0216.vip-福彩3d试机号号码| www.7264.cc-彩虹5无人机造价| www.25749.com-彩票驿站合法| www.541086.com-懂球帝买足彩| www.ve48.com-和彩-| www.19vd.com-亿博彩票是真的吗| www.061.cm-体彩中奖人员名单| www.287228.com-彩票刷对冲佣金| www.675505.com-彩票双色球开三等奖| www.860081.com-2019彩票平台| www.957576.com-时时彩都是假| 优彩网www.987443.com| www.je24.com-安徽福利彩票官网| www.6319.cn-杏彩手机版登陆| www.717024.com-世界彩铅排名| www.801704.com-彩票打印是什么程序| www.39zr.com-体彩奇偶号走势| www.14io.com-全民中彩客户端| www.097700.com-快三吉林长春| www.81543.com-河北快三大小单双| www.091161.com-重庆时彩下注平台彩| www.990271.com-体育彩票几个数| www.ht89.com-北京福彩pk拾官网| www.05ip.com-竞彩猫直播预测分析| www.161.live-大地彩票2-| www.23kd.com-福利彩票新人怎么买| www.1216.xyz-华彩控股股价| www.234559.com-网售彩票-| www.679207.com-中彩网首页开奖结果| www.766597.com-天天彩选4几点开奖| www.bb65.com-快三高手打法| www.fa57.com-福彩3d开奖解密| www.98705.com-足彩3串3什么意思| www.079249.com-怪兽猎人彩票机攻略| www.72bw.com-狂想彩票谜语总汇| www.640802.com-彩票创意图-| www.751025.com-彩票刮刮卡上瘾| www.828296.com-欧美彩票大奖排行榜| www.919102.com-外围彩票安全吗| www.977751.com-彩色压模混凝土施工| www.535908.com-中彩票后很低调| www.599552.com-篮球体彩微信群| www.667231.com-跑马彩票开奖结果| www.285.red-河南商丘民权县彩礼| www.4562.in-彩票3d擂台-| www.30743.com-福彩3d开奖回查| www.20eg.com-幸运彩大发快三| www.647764.com-淘彩娱乐是骗局吗| www.791519.cc-梦想彩票43131| www.878875.com-福彩3d百度大全| www.977971.com-快三怎么买能赚到钱| www.36xu.com-什么软件买彩票可靠| www.097215.com-体育彩票公益| www.319748.com-欧洲杯彩票怎么买| www.471127.com-关于私彩法律规定| www.626353.com-彩民堂下载-| www.757833.com-彩票网站提现不到账| www.885863.com-福彩快3d软件下载| www.990965.com-有能买彩票的软件吗| www.sj18.com-中国时时彩投注平台| www.087227.com-网易彩票分析软件| www.227752.com-众彩平台网址| www.53515.cc-网赌快三输了| www.64440.com-体彩排列五历史数据| www.095126.com-福彩3d双采图| www.263785.com-山东体彩网app| www.718308.com-中国体彩11选5| 500彩票www.500190.com| www.59to.cc-福利彩世界合法吗| www.37zw.cc-下载七星彩或规律| www.70967.com-怎么刷平台彩金| www.28538.cc-腾讯5分彩计划群| 梦想彩票www.33112g.com| www.981140.com-用彩泥做冰淇淋| www.oy13.com-香港买彩金骗局| www.06eo.com-八卦预测彩票方法| www.719.me-私开彩票-| www.52962.cc-黑彩3d庄家是什么| www.111508.com-盈彩网有app吗| www.272788.cc-彩票社会责任| www.369602.com-彩民红高手水论坛| www.cy18.com-彩神通今日推荐| www.zh50.com-怎么开彩票网站| www.4961.com-超级大乐彩怎么玩| www.57238.com-宝盈彩app-| www.023021.com-各种彩票玩法说明| www.88532.com-乐都彩票下载| www.749993.com-全中彩票正规| www.844080.com-福彩变为国企会怎样| www.926083.com-福利彩票多少位数字| www.987543.com-505彩票怎么玩| www.al89.com-彩票过滤软件下载| www.tm43.com-中国体彩报下载| www.258045.com-网络售彩举报| www.672488.com-排列三体彩专家预测| www.795517.com-快三9的和值| www.892383.com-买高频彩输了30万| www.79885.cc-海南快三开奖号码| www.884658.com-欧阳霄贵州体彩网| www.981661.com-大成彩票-| www.ie40.com-福彩3d中奖-| www.0pt.com-彩票走势教学| www.91hr.com-pk彩下载安装| www.5180.net-福利彩票东方七乐彩| www.14695.com-体育彩票放假| www.0kv.com-天福彩票客服qq| www.112677.com-七星彩历年开奖查询| www.801031.com-购彩网安卓版下载| www.913257.com-广西快三闯关计划| www.973129.com-周杰伦彩虹歌词| www.948.live-七星彩开什么号码呢| www.10246.com-腾讯分分彩必赢技巧| www.3315.com-汇彩网入口-| www.284395.com-快乐时时彩b盘开奖| www.470870.com-台湾5分彩网站| www.415400.com-uc彩票官方网| www.516721.com-六爻彩票泄天机| www.576171.com-杭州福彩网点查询| www.4674.win-中堂彩自动报码| www.0038.xyz-彩票可能中奖数字| www.7654.me-七星彩余3数| www.581054.com-星彩网彩票开奖大全| www.675997.com-温州彩礼一般多少钱| www.779830.com-商场里的彩票游戏机| www.855541.com-南方众彩网3d预测| www.930298.com-吉林省彩票快三遗漏| www.978043.com-猫彩色画-| www.p35.net-开彩妆加盟店| www.50wm.com-彩票9773d-| www.9673.mobi-众乐彩票的骗局贴吧| www.12lg.com-火凤凰彩票网站| 彩民网www.76520z.com| www.129555.com-七星彩开码结果查询| www.206547.com-下载内蒙古体彩| www.023609.com-匕乐彩推荐-| www.96cn.com-鸿彩是真的假的| www.00331.com-湖北快三和直跨度| www.323172.com-中国体彩网官方网购| www.513666.cc-快三两码-| www.431599.com-周3什么彩票开奖| www.556754.com-福彩往期-| www.883829.com-博瑞彩票团队| www.352912.com-热购彩票靠谱吗| www.540069.com-适合跳快三的歌曲| www.902086.com-黑彩坐庄能赚钱吗| www.es58.com-立彩彩票的骗局揭秘| www.v90.site-如何成为彩票的庄| www.pe55.com-河北快三对子号分析| www.02jw.com-彩虹映脸男生头像| www.74bz.com-买2元黑彩-| www.171236.com-上海快三漏-| www.n88.cn-中彩网官方网站下载|