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天

知道了
彩01彩票 500万彩票www.96386f.com| www.625703.com-9手机彩票-| www.pz27.cc-人人中彩票合法吗| www.06fr.com-彩铅调肉色-| www.145245.com-彩票的漏洞-| www.585501.com-乐彩大乐秀走势图| www.2506.cc-58彩票开奖网| www.501271.com-迷彩网厂家-| www.608329.com-彩票3d200-| 博亿彩票www.669by.com| www.45021.cc-彩票实体店网上销售| www.015743.com-七星彩有什么软件| www.105145.com-好彩蓝莓爆珠真伪| www.029893.com-福彩3d彩吧图谜一| www.167075.com-快三出号规律| www.282367.com-特区体彩论坛| www.39583.cc-九歌彩票下载623| www.200097.cc-星期五什么彩票开奖| www.563080.com-中博系统的彩票平台| www.727672.com-福彩中奖号码今日| www.854989.com-辽宁福彩3d走势| www.970986.com-人到绝境买彩票| www.uu.cc-安徽快三开奖直播| www.d45.net-海南七星彩梦册查询| www.65oq.com-辽宁省福彩中心官网| www.4411.cn-福彩牛人-| www.353181.com-热购彩票是黑网站吗| www.696.red-足球竞彩胜平360| www.543755.com-快三的十大秘诀| www.769795.com-好彩粤语-| www.910671.com-乐彩写真机驱动下载| 爱彩乐www.682918.com| www.20.net-海南私彩三字现包码| www.9002.org-大众彩票网登录| www.594753.com-香港好彩免费资料网| www.615111.com-三彩瓷-| www.83xb.com-天津福利彩票双色球| www.5982.vip-经营福彩还是体彩好| www.52902.com-好彩香烟绿色宝珠| www.059806.com-小鹿多彩-| www.265922.com-宁夏福彩3d-| www.365431.cc-彩铅画人物教程简笔| www.639207.com-体彩店微信号去哪找| www.861852.com-幸运彩票手机版下载| www.948275.com-3d多彩网彩票| www.600116.com-无缘彩票-| www.789213.com-澳洲三分彩稳赢计划| www.984962.com-重庆实时彩下载| www.t06.cc-河南省快三开奖查询| www.7817.biz-足彩复盘技巧| www.129002.com-福彩周五开什么奖| www.xd85.com-中彩网骗人-| www.043215.com-广西风彩-| www.131724.com-南充广元彩礼多少| www.211999.cc-彩客网是正规平台吗| www.61244.com-约彩105彩票下载| www.088201.com-澳客体彩开奖| www.qv71.com-分分彩计划-| www.871234.cc-彩专家人工计划下载| www.41uk.com-老盘任九唯彩会官网| www.762342.com-竞彩篮球最新app| www.95717.com-竞彩返还率是多少| www.111133.com-御彩轩官网-| www.56455.cc-众彩彩票是骗局吗| www.221595.com-快三破解软件| www.160920.com-彩票公司电话号码| www.267365.com-快三的专家推荐号码| www.365978.com-7星彩开奖查询| www.o93.club-彩票中奖赠与父母| www.65qe.com-山东彩票网首页| www.2682.cm-6288彩票平台| www.11672.com-香港天空彩与你同行| www.70000.com-时时彩任选3绝技| www.0349.cn-彩20下载到手机| www.65dw.com-怎样微信购彩票| www.097654.com-手机彩票真假| www.298309.com-今日福利彩票开奖| www.96348.com-福彩文化理念有哪些| www.536275.com-好听的关于彩票名字| www.sy75.cc-开6位数的彩票| www.635125.cc-七彩狐泳装招聘| www.715519.com-微信彩票下注| www.945850.com-足彩胜负14场玩法| www.ih53.com-福彩211路遗漏| www.1502.me-夸女孩子的彩虹屁| www.8922.com-体彩竞彩兑奖有效期| www.cl94.com-彩神帝大发快3| www.o02.com-大乐透彩票玩法说明| www.44qz.com-竞彩足球输了就倍投| www.112.press-河内分分彩计划在线| www.99949.cc-北京体彩店联系| www.18op.com-七星彩历史对比器| www.222516.com-安徽快三和值走势图| www.2326.cc-福彩快开调整显示| www.8985.top-天津体彩开奖| www.546765.com-彩票为什么要刷流水| www.035233.com-彩02-| www.554180.com-两字体育彩票术语| www.2104.com-昆山体彩兑奖中心| www.22720.com-游戏厅彩票换币法则| www.798416.com-宁夏福彩快三直播吧| www.6653.vip-腾讯分分彩八手必中| www.41431.com-怎么举报彩票app| www.825867.com-吉林传统快三预测| 中彩网www.81233c.com| www.81df.com-体彩5加2范围| www.518241.com-安徽好彩开奖结果| www.803869.com-快三多少期-| www.08222.cc-彩票站牛逼宣传语| www.sw8.com-上海快三预测专家号| www.16181.com-福彩王云戈简历| www.676939.com-2k彩票下载安装| www.762032.com-彩色复印机租赁费| www.199837.com-江苏快三在那开奖| www.337971.com-海南快2开奖彩票| www.420228.com-竞彩蓝球实时比分| www.467255.com-黑龙江省福彩彩票| www.582689.com-优彩网官网app| www.666114.com-在手机上怎样买体彩| www.798499.com-中国体育彩票6?1| www.886449.com-百度乐彩彩票| www.963474.com-网购足球彩票| www.cai3932.com网络平台快三可靠吗| www.4893.me-到哪买足彩-| www.65609.com-彩票随机选号| www.358709.com-228彩票网站| www.619499.com-3d彩票的秘密公式| www.695718.com-彩票网站源码下载| www.761904.com-彩友会计划软件下载| www.838441.com-8k彩票主页下栽| www.925997.com-深圳区块链彩票| www.983375.com-黄直播赌博彩票平台| www.de41.com-四亿彩票app| www.20qa.com-16号彩票开奖结果| www.99sq.cc-有外国高频彩的网站| www.5377.win-福彩老板微信| www.06758.com-福彩家财网-| www.66835.cc-福彩对奖-| www.29bp.com-东莞福利彩票加盟| www.682386.com-在微信买足彩| www.39800.com-c8·cn彩票-| www.152970.com-肥强竞彩12课堂| www.285600.com-福彩拖胆玩法介绍| www.vv84.com-快三如何赢钱| www.3010.vip-风采彩票软件下载| www.5222.top-江苏快三开奖电视图| www.088915.com-彩神快三-| www.146156.com-一号彩票提款安全吗| www.221080.com-彩票论坛牛材网| www.280658.com-中国时时彩投注平台| www.337382.com-湖北快三未出号码| www.398020.com-淘宝彩票安卓版下载| www.k81.top-可以赚钱的彩票软件| www.22sl.com-大本营彩票提不了款| www.83aa.com-和彩云空间-| www.7471.cm-彩票专家赚钱吗| www.568117.com-大发彩票提现3天| www.904.me-彩铅画风景作品大全| www.4893.biz-利澳平台手彩票注册| www.6651.top-有盈彩票安全不| www.383962.com-五六彩票-| www.558707.com-夸女孩子的彩虹屁| www.880636.com-3号彩票网-| www.71oe.com-穷人买彩票打油诗|