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.85gf.com-大发彩票输了十万| www.9428.loan-加拿大彩票头奖华人| www.8117.loan-葡京彩票注册平台| www.111497.com-盈彩网图标-| www.259151.com-彩票兑奖大乐透| www.81931.com-北京彩票站申请| www.056225.com-彩票非法经营罪案例| www.132792.com-彩色压模-| www.857447.com-彩之源彩票是怎么玩| www.974742.com-中国甘肃体彩官网| www.34nu.com-多赢快三计划软件| www.86000.cc-山东彩板厂家| www.176825.com-彩票稳赢计划群| www.e13.me-全民福彩下载安装| www.862954.com-点击更多精彩| www.958110.com-帝皇彩票app官网| www.ek39.com-好彩网牛彩-| www.7ox.com-单位年会彩票| www.88bi.cc-凤凰彩票兼职靠谱吗| www.44pc.com-彩运来线路检测中心| www.821785.com-彩乐乐双色球杀号| www.960924.com-七点彩票-| www.cp7368.com-什么叫快三彩票| www.4ln.com-人人体育彩票官方| www.87iw.com-福利彩票经验技巧| www.368935.com-彩票开奖历史数据| www.397364.com-分分彩后三做号技巧| www.512340.com-彩铅画古风女子| www.581930.com-彩8娱乐app-| www.654679.com-500万彩票3d| www.738881.com-哪里有江苏快三群| www.025651.com-新彩吧字谜图谜总会| www.134911.com-体彩江苏7位数玩法| www.236066.com-澳客彩票网-| www.338467.com-中国体育彩票新闻| www.462446.com-中国彩宝市场| www.9070.cc-头彩app最新版| www.770526.com-澳门时时彩app| www.923456.com-彩票投注站私自吃票| www.999201.com-竞彩足球推荐彩客网| www.oj26.com-吉林市福彩上哪兑奖| www.342922.com-浙江体彩大乐透1| www.484206.com-极速快车彩票计划| www.666777.cc-e乐彩提现-| www.788729.com-新加坡福彩开奖结果| www.884433.com-中国彩吧遗漏| www.981654.com-菜鸟彩票官网| www.wv80.com-九宫图在彩票3d| www.968602.com-北京色彩传奇骗局| www.lu0.cc-人人彩怎么关了| www.ye00.com-全新韩国快三| www.87941.com-足球竞彩分析| www.575187.com-牛彩测速-| www.693516.com-足彩胜平负3种猜法| www.19jq.com-大智慧彩票网合法吗| www.656195.com-融彩网是真的假的| www.738795.com-金利网彩票网| www.58287.com-彩乐网彩票-| www.028038.com-乐佳商城彩票| www.112813.com-安徽省福彩中心电话| www.186400.com-菲律宾幸运快三彩票| www.219816.com-彩吧论坛一首页| www.681529.com-豪彩娱乐坑了多少人| www.1628.in-41期快三-| www.519950.com-福彩8平台邀请码| www.748989.com-600w彩票网登录| www.686759.com-中彩那天课文朗读| www.814522.com-吉林快三11月26| www.66wp.cc-分分彩压龙虎技巧| www.jo3.com-福彩3d组六胆拖| www.561170.com-粤海彩票高手料| www.656895.com-足球竞彩奖金加| www.783228.com-苏州福彩开奖号码| www.875181.com-大发快三稳赚方法| www.945318.com-福建体彩网阿四论坛| 爱上彩票www.ascp0.com| 126彩票网www.570126.com| www.4779.com-彩票能折叠么| www.992252.com-时时彩定位胆经验| www.819737.com-彩票老板自己中奖| 网易彩票www.084wy.com| www.137363.com-一分快三和值计划| www.062847.com-淘宝彩票可以买了吗| www.36573.com-澳门的彩票-| www.209675.com-大发快三是什么平台| www.958665.com-广州彩票开奖| www.41co.com-七星彩自购盘| www.9393.cc-在马来西亚做博彩| www.271743.com-神州彩票app网址| www.825597.com-哈尔滨快三开奖| www.884613.com-彩票开奖查询地方彩| www.137355.com-印尼5分彩开奖网站| www.lr84.com-彩票专家-| www.7hq.com-铁西彩票店-| www.73xu.com-好彩客苹果下载不了| www.et25.com-旺彩娱乐-| www.zm03.com-浙江福彩快-| www.23nl.com-四川省福利彩票组六| www.676226.com-中国体彩报订阅| www.6295.xyz-北京市3d彩票库图| www.364920.com-广西快三有漏洞吗| www.52731.cc-55彩票安卓下载| www.97eh.com-彩排-| www.579819.com-福彩开奖一百度| www.035516.com-至尊彩首页-| 吉利彩票www.80065r.com| www.18863.cc-998彩票网站| www.5627.biz-体彩中奖扫一扫| www.51200.com-彩之风彩票下载| www.572914.com-彩图诗句看图解码| www.55378.com-极速时时彩彩规律| www.163369.com-易彩3d彩票-| www.653503.com-3d八卦图彩表| www.752776.com-彩票天天存天天送| www.848475.com-竞彩专家推介| www.917448.com-内蒙快三注册| www.983248.com-新盈彩是什么| www.jy10.com-广西快三冷热号| www.k03.club-福彩新彩吧图谜总汇| www.068572.com-彩乐乐遗漏数据查询| www.992715.com-快三智能选号器| www.gf03.com-彩票端下载-| www.b86.net-吉林快三三不同推荐| www.29je.com-搜孤彩票-| www.947208.com-体彩乐选三票| www.994962.com-体育竞彩足球结果| www.bc02.com-安徽快三分布图| www.va47.com-重庆时时彩胆码口诀| www.07ez.com-每天彩票开结果| www.501032.com-手机彩票软件能买吗| www.626301.com-时时彩胆码对应码| www.705133.com-足球彩票奖池| www.785597.com-中国体彩网官方篮球| www.891136.com-红彩会-| www.983243.com-众彩中彩-| www.yy59.com-惠民彩票首页| www.51653.cc-彩界联盟怎么下载| www.1798.cm-威尼斯人手机彩票| www.774847.com-全国快3彩票| www.864666.com-牛彩网彩票-| www.959738.com-彩61主页-| 中国福利彩票www.6364t.com| www.lx13.com-分分时时彩开奖网| www.561380.com-体彩31复式计算器| www.193929.com-天下彩中彩香港| www.382058.com-买彩票中奖还帐| www.503292.com-鸿彩光束灯-| www.938776.com-亿理亿彩网-| www.051227.com-绿和彩-| www.136808.com-7彩网一分快三| www.217048.com-怎么玩省份快三| www.257915.com-比较好的ios彩票| www.326583.com-彩票身边中奖| www.385061.com-什么叫彩票源码| www.s68.biz-购买江苏快三app| www.bg51.com-快三怎么稳赚| www.s37.site-彩坛-| www.48fs.com-七星彩尾号走势图| www.148678.com-乐八彩票安卓| www.249068.com-中奖彩票app官网| www.17194.com-福彩专刊报-| www.54333.com-自助申请app彩金| www.35292.cc-金丽彩票-| www.83359.cc-彩票必中高手|