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.397633.cc-2元彩3d走势图| www.dp25.com-彩6下载安装| www.85re.com-重庆时间时彩走势图| www.25731.cc-世界杯足球体育彩票| www.020614.com-时时彩免费源码| www.085175.com-优彩网彩票靠谱吗| www.186771.com-中彩网网址-| www.366086.com-高端彩票网站制作| www.75557.com-甘肃快三走势图昨天| www.127501.com-新彩虹世界-| www.3821.biz-海南七星彩规律预测| www.00757.com-福彩3d村黄金蛋吗| www.su11.com-幸运快三首页| www.41ig.com-中彩网北海-| www.yx99.cc-红旗彩票导航| www.fd43.com-玩金利彩票被骗| www.365547.cc-彩色铅笔画画图片| www.6567.com-深圳市鑫彩晨科技| www.657377.com-卖彩票的店怎么开| www.53379.cc-老时时彩走势360| www.5422.vip-彩钢瓦光伏安装价格| www.99644.com-彩票巨人计划软件| www.2984.pw-9万彩票苹果版下载| www.886109.com-时时彩输得一无所有| www.650786.com-水彩设计创意画图片| www.782925.com-彩票开奖7月29日| www.858537.com-彩神计划软件下载| www.919516.com-自己怎么搭彩票网站| www.982554.com-同城彩票骗-| www.kg46.com-广西福彩app| www.e27.com-来自旺彩大乐透社区| www.750337.com-北京单场彩开奖| www.837098.com-一定牛体彩下载| www.906783.com-福彩福建快3心得| www.972297.com-q彩票网是真的吗| 99彩票www.881799a.com| www.972754.com-彩库宝典查询资料| www.028406.com-博瑞彩票快三| www.5526.net-买环球五福彩赢钱吗| www.033601.com-香港彩神网论坛| www.125530.com-5元福彩刮刮卡| www.622015.com-壹号彩票app下载| www.703538.com-福彩天地报官网| www.788080.com-特彩吧旧版-| www.866781.com-昨天开什么奖彩票| www.947861.com-海南竞猜型体育彩票| www.999895.com-大发快三提现没到账| www.dp66.cc-网上玩快三-| www.ud06.com-123彩票官方网站| www.09js.com-彩友时时彩人工计划| www.cf99.com-yy彩票平台登录| www.151549.com-彩经网排三杀号定胆| www.86cp.com-必发彩票违法吗| www.855177.com-uc彩票ios-| www.256957.com-彩票大同平台合法吗| www.375572.com-全民中彩客户端| www.533248.cc-体育彩票说明| www.650759.com-什么是十字彩赌博| www.799533.com-体彩竞彩彩票怎么看| www.7807.vip-财神分分彩-| www.148152.com-黑龙江福彩20分| www.832211.com-体彩七星彩摇奖视频| www.13982.com-香港皇家时时彩| www.tf95.com-时时彩要改时间了吗| www.06bj.com-福彩走势图连线版| www.1317.cc-七乐彩走势图| www.637964.com-附近的竞彩店| www.840658.com-广西体彩中心主任| www.974552.com-好运来彩票app| www.cp5331.com-快三中奖宝典| www.33786.cc-武汉福彩中心| www.757979.com-99彩票可信吗| www.326889.com-175oo乐彩网l| www.990124.com-老快三加奖-| www.st56.com-时时彩9码-| www.5891.wang-福彩发号中心| www.50277.cc-中国彩软件-| www.332253.com-下载网冠彩app| www.717206.com-彩铅画的意义| www.115559.cc-彩铅樱花树-| www.063606.com-用微信卖彩票犯法吗| www.388987.com-华彩人生下载| www.543242.com-易中奖彩票被调| www.681660.com-买彩票下载哪个软件| www.794713.cc-彩票巫师-| www.290169.com-好彩客是合法的吗| www.30cz.com-极速分分彩结果| www.077016.com-属兔买彩票号能中奖| www.263130.com-七乐彩奖池余额多少| www.385876.com-查体彩7星彩| www.539746.com-最近的体彩投注站| www.612958.com-体彩广东-| www.711004.com-约彩365下载官网| www.916188.com-海南私彩打击庄家| 福利彩票www.99677j.com| www.02ix.com-福彩布衣图-| www.77274.com-众博彩票软件下载| www.331696.com-玩彩票输了十几万| www.464871.com-彩票是怎么个玩法| www.558509.com-用彩铅画的简单画| www.672630.com-安然七星彩众彩网| www.771829.com-福利彩票3查询结果| www.864666.com-牛彩网彩票-| 大玩家彩票www.84499k.com| www.pm07.com-随州论坛快三| www.0579.love-手机我中啦彩票下载| www.123096.com-酷彩中国-| www.220898.com-彩票快三的规律| www.br52.com-彩票走势图全国| www.4111.pw-体彩选号器app| www.51565.cc-超彩糖-| www.008131.com-周五哪些彩票开奖| www.326.space-即时开彩安卓版下载| www.6767.org-788彩票-| www.gb27.com-福彩3b字谜专区| www.458883.com-cba篮彩竞猜推荐| www.580993.com-成都体彩店-| www.776960.com-锋彩直播如何添加源| www.8306.cc-星期一开奖的彩票| www.45436.com-时时彩彩票投注平台| www.6653.cm-金祥彩票网址是什么| www.69390.com-曹淑彩博客-| www.1275.net-体彩金七乐玩法介绍| www.19dq.com-点击进入精彩新内容| www.9180.vip-彩票直播app下载| www.69374.com-彩票获奖经验| www.051121.com-一彩仙知-| www.321262.com-七星彩票开什么奖| www.033.site-福彩投注站申请| www.lq03.com-彩经网官方下载苹果| www.41233.com-tt彩票网-| www.95935.com-重庆时时彩最新消息| www.039772.com-多乐彩app-| www.87941.com-足球竞彩分析| www.051980.com-六喝彩开奖现场报码| www.62ve.com-晋城彩票站转让| www.83368.cc-潘斌龙彩票电影| www.3344.biz-k7彩票app-| www.8952.biz-盛兴彩票欢迎使用| www.42722.com-中原福利彩票开奖| www.224030.com-中彩网一分快三技巧| www.339823.com-神彩通是什么意思| www.427262.com-玩时彩-| www.511793.com-足彩任九场-| www.565016.com-天客彩票-| www.622648.com-彩票36o走势大全| www.675093.com-西游娱乐彩票| www.736753.com-上海体育彩票官网| www.789621.com-中国竞彩篮球销售额| www.844858.com-体彩公益宣传| www.890101.com-百富博彩论坛| www.950401.com-百乐彩客户端| www.988081.com-腾讯天天中彩吧| www.cp474.com-大发快三怎么玩才赢| www.026.pw-返奖最高的彩票平台| 澳客网www.okw2.com| www.4557.biz-海南七星彩开奖| www.5005.in-吉祥8彩票官网| www.543259.com-玩彩老头双色球| www.648802.com-境外有中国彩票买吗| www.820040.com-令天六开彩开奖结果| www.939776.com-天天彩是真的假的| 万利www.32123v.com| www.it12.com-掌上购彩app下载|