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天

知道了
9彩注册 www.87832.cc-体彩排例三藏机诗| www.112344.com-98娱乐时时彩平台| www.121192.com-河南快三奖金规则| www.225616.com-重庆时时彩讨论吧| www.304527.com-十一选五彩票平台| www.390531.com-体彩彩吧图-| www.523725.com-时时彩后二预测软件| www.73732.cc-介绍几个彩票平台| www.5494.top-彩虹岛水果破解版| www.40995.com-ok彩票网能玩吗| www.8425.cn-m8彩票关了吗| www.km83.com-宝赢彩票软件| www.798829.com-体彩泳坛夺金开奖| www.367853.com-鲸鱼彩铅画-| www.3045.org-江苏省体彩7位数| www.011693.com-昨晚福彩开什么| www.96818.cc-民政部福利彩票李绚| www.086837.com-彩富彩票app| www.04yk.com-彩票刑事案件| www.678085.com-德甲足球竞彩网| www.168217.com-湖北快三今天必出号| www.146011.com-彩票c53cc-| www.717058.com-好的彩铅品牌| www.501031.com-黑白照片一键变彩色| www.590202.com-竞彩足球场次| www.210647.com-一分彩是国家开奖吗| www.802662.com-198时时彩注册| www.909540.com-彩票大小单双| www.975471.com-彩票购买支付宝| www.er44.com-今天体彩独胆| www.7gl.com-彩票没买却中了| www.508399.com-彩票1980是什么| PK彩票www.8499a.com| www.fx55.com-微信彩票女-| www.w13.cn-体育彩票猜世界杯| www.34ud.com-彩票代购排名前十名| www.682844.com-彩票终端机-| www.774715.com-七乐彩规则怎么玩| www.901788.com-江苏体育彩票排列五| www.965891.com-最近福彩中奖的彩民| 天天彩票www.190881.com| www.398383.com-彩票网站找人代打| www.602825.com-百乐彩合法吗| www.831519.com-广东省体彩总销量| www.896171.com-玩彩王-| www.959429.com-官崎彩-| 全民彩票www.39391.cc| www.802301.com-精彩大片app| www.876437.com-掌上京彩app下载| www.995606.com-易彩彩票漏洞| www.bx20.com-博彩推广技巧| www.888085.com-开心七星彩坛| www.968006.com-胜负彩超级必发指数| www.cai1226.com今天快三开奖号| www.yi30.com-附近时时彩票投注站| www.95556.cc-福利彩票最近| www.107908.com-福彩作弊-| www.402996.com-七乐彩天齐网杀号| www.508036.com-七星彩番外篇明月珰| www.579395.com-500彩票骗局| www.637251.com-全国彩票销售额| www.774055.com-北京微信快三群| www.848703.com-心脏彩超正常值图片| www.908003.com-高端彩票源码| www.964683.com-刮彩票有什么技巧| QQ彩票www.89894t.com| www.lk13.com-中彩在线平台| www.4dc.com-福利彩票交流3d群| www.58lg.com-失信人可以领彩票吗| www.145499.com-今晚足彩专家推荐| www.256867.com-北京快三豹子走势图| www.351036.com-接手彩票店风险| www.66564.com-时时彩租平台| www.07dg.com-幸运彩票官网骗子| www.008125.com-福彩开奖上期| www.659636.com-乐彩网吧-| www.lq31.com-中彩网靠不靠谱| www.967.in-七乐彩出球先后顺序| www.623769.com-台湾快三网站| www.512659.com-菊花彩铅画-| www.711443.com-天天福彩真的假的| www.vl09.com-福彩助手是真的吗| www.573950.com-数学学得好买彩票| www.756543.com-c08彩票-| www.907398.com-彩票机有几种玩法| www.42qc.com-牛彩网3d精准杀号| www.71996.com-彩猫彩票老版本| www.351080.com-k彩平台登录| www.567978.com-做彩票代购合法吗| www.048282.com-3d天天彩图-| www.414024.com-挂彩了是什么意思| www.750487.com-玩uu快三有技巧吗| www.hk34.com-网络彩票平台合法吗| www.039723.com-华彩是传销吗| www.676146.com-七乐彩怎么兑奖| www.920197.com-彩gg官网-| www.bg49.com-博彩app排名| www.356112.com-公益体彩宣传语图片| www.466602.com-a23彩网-| www.626017.com-三分彩是正规开彩| www.860517.com-彩票网上投注平台| www.331071.com-彩票免费网址大传| www.878953.com-极速赛车彩票小技巧| www.gy02.com-竞彩猫属于诈骗吗| www.375255.com-小小鱼版一彩吧图谜| www.680567.cc-百乐门彩票真的假的| www.911099.com-安徽快三最新预测| www.0317.biz-体育彩票安卓版| www.329273.com-蒙古快三彩票平台| www.815153.cc-福彩3d今日号码| www.806826.com-废旧彩票回收| www.1723.wang-助赢彩票软件下载| www.204409.com-快三官网开奖| www.422255.com-酷狗彩铃下载| www.713570.com-福彩几位数能中奖| www.654805.com-七星彩天涯论坛| www.sf97.com-分分时时彩龙虎特点| www.87618.cc-天下彩票大全看图| www.80782.com-彩票k线图技巧| www.675061.com-今晚六给彩开奖结果| www.799040.com-大钱庄彩票官网| www.228992.com-成都哪里买好彩烟| www.454057.com-汇彩网是什么意思| www.882501.com-国家正规的高频彩票| www.586830.com-爱乐彩票抢红包| www.198365.com-下载大发彩票app| www.344212.com-雪缘园足彩直播吧| www.585071.com-好彩酒楼-| www.964653.com-6701彩票网下载| www.362538.com-彩票摇奖现场直播| www.no24.com-福彩3地丹东图| www.5150.red-申请开彩票投注站点| www.818012.com-奥博集团彩票| www.303708.com-双彩论坛走势图| www.502652.com-多彩投怎么样| www.9425.loan-七星彩中二个数字| www.387944.com-华彩管理咨询| www.42og.com-熊猫彩铅画-| www.181615.com-好彩投买彩票安全吗| www.440304.com-彩乐乐杀号彩票网| www.698975.com-谁有华夏彩票邀请码| www.019479.com-彩吧祝手-| www.954632.com-国外彩票网站合法吗| www.4iy.com-19500彩票网| www.5295.xyz-永盛国际手机彩票网| www.yo59.com-体育彩票二串一| www.777453.com-皇冠彩票有人用么| www.31183.cc-彩神2载-| www.034031.com-篮球彩票258| www.703044.com-3位数的彩票| www.499166.com-彩票北京小汽车玩法| www.766444.com-福彩3d杀码家彩网| www.944320.com-大联盟彩票如何| www.77010.com-华东福彩15选5| www.864358.com-手机彩膜定制| www.ul97.com-体彩兑奖多久到账| www.712033.com-足彩十四场分杪| www.937197.com-wfcp五福彩-| www.42ni.com-看看彩票的开奖情况| www.95361.com-中国福利彩票发展| www.637303.com-小米彩虹5-| www.72pb.com-竞彩足球容错玩法| www.365538.cc-水溶彩铅水彩| www.sy71.cc-腾讯十分彩下载|