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.of25.com-河北快三输了几十万| www.9nv.com-赛果开奖彩客网| www.557280.com-彩宝贝彩票专家预测| www.671140.com-香港和彩宝典大全| www.799670.com-众众彩-| www.909234.com-七星彩几点开奖结果| www.cp852.com-快三单双大小投注| www.530531.com-重庆时时彩杀前三号| www.69462.com-京彩挂机支持平台| www.089368.com-台北天地快三真假| www.199860.com-湖北武汉快三| www.317356.com-彩票id-| www.470085.com-中国足球竞彩返奖低| www.545437.com-福利彩票30选七| www.647889.com-四川省中国体育彩票| www.745809.com-三地福彩走势图| www.821783.com-彩票中奖码是什么| www.011060.com-福彩快三倍投计划书| www.cp7533.com-彩票计划app推荐| www.95zw.cc-高中生中彩票20万| www.5033.cc-全天重庆彩计划独胆| www.of59.com-梧桐彩票登陆| www.539.red-中国彩官网下载| www.794565.com-微信云端国际彩票| www.37106.com-众恒平台购彩可靠吗| www.063303.com-怎么加盟体彩彩票店| www.775693.com-带彩票的网名| www.308005.com-派彩网首页-| www.5819.pw-足彩三场两关| www.09283.com-北京体彩电话投注| www.295603.com-时时彩历史开奖号| www.439456.com-彩之星站-| www.825365.com-七星彩精英数据分享| www.984536.com-福彩3d小军图库| www.bi71.com-重庆快三开奖结果| www.gi09.com-68彩票1分快3| www.d51.cn-体彩开奖直播小炮| www.57ed.com-彩票大师官网下载| www.2318.xyz-彩票中奖是天定的| www.03779.com-爱买彩票的男人| www.8383.net-今日吉林快三| www.91229.cc-开幕式彩烟贵吗| www.250938.com-豪彩vip首页| www.378627.com-幸运彩票下载900| www.qj91.com-好彩1及中奖规则| www.537053.com-彩票头像图片| www.233008.com-北京福彩3d论坛| www.401598.com-彩九官网-| www.540051.com-256彩票ios-| www.35535.com-彩票匕星彩开奖号码| www.017353.com-福彩上海基本走走势| www.542920.cc-体彩大热透游戏规则| www.678676.com-彩天下代理申请| www.769272.com-什么是好彩网| www.838397.com-什么是快3彩| www.902984.com-北京快三遗漏查询表| www.964197.com-福彩高手3+d彩票| 500万彩票www.39500s.com| www.213786.com-彩神vi合法吗| www.083575.com-买哪一种彩票好呢| www.425460.com-七彩冰淇淋做法大全| www.3cx.com-捡了张彩票改了个号| www.53625.cc-时时彩万能3码| 亚洲www.703890.com| www.ku58.com-上海快三销售时间| www.h21.club-体彩神采嘉宾断组| www.059191.com-500竟彩网首网| www.s58.org-电脑彩色打印机出租| www.872779.com-8k彩票购彩大厅| www.935396.com-苹果彩票下载软件| www.981892.com-新彩彩票注册送18| www.cp1233.com-内蒙福彩10分钟| www.687131.com-彩票大奖怎么领取| www.60077.cc-七星彩开码直播| www.897385.com-体彩竞猜怎么玩| www.ld79.com-福彩大彩网-| www.313692.com-彩票最新新闻| www.416202.com-兼职代理彩票| www.264638.com-快频彩改为20分钟| www.366691.com-微博怎么买体彩| www.003773.com-彩之源正规吗| www.562068.com-鸿彩网址多少| www.1690.hk-天天彩票论坛一码| www.39956.cc-博牛彩票是骗人的吧| www.992767.com-北京福彩代理| www.06sa.com-彩铅手绘麋鹿图片| www.950752.com-体彩三天计划王| www.bv8.com-彩9官方下载| www.711767.com-天天福彩下载网址| www.690.cm-时时彩代理反水规则| www.028580.com-乐彩网福彩3d| www.8828.site-白菜彩票论坛大全| www.039030.com-投资彩票赚钱靠谱吗| www.30748.com-pk彩票安卓版| www.685214.com-排列五体育彩票| www.211639.com-福彩快三正规吗| www.02931.com-35彩票计划-| www.90466.com-口袋彩店官网下载| www.110412.com-福彩3d什么号| www.019748.com-福利彩票广西快三| www.uf08.com-乐彩网靠谱吗| www.66fn.com-星游时时彩官网| 中国福利彩票www.6364m.com| www.440923.com-到体育彩票店上班| www.908946.com-体彩排列五新玩法| www.975983.com-福彩杀码大全| www.cai328.com-信誉好的私彩平台| www.hm42.com-福利彩票分析| www.520666.com-群里买彩票是真的吗| www.289197.com-查今天彩票开奖号码| www.456194.com-乐博彩票软件| www.322073.com-八一彩票网推荐网站| www.385666.com-富强彩票有没有猫腻| www.479800.com-澳门惠民彩-| www.556275.com-118彩涂-| www.134566.com-好彩黑绿爆珠港版| www.147355.com-手机版苹果彩票| www.715844.com-把彩票戒掉-| www.621872.com-随州论坛福彩社区| www.774418.com-福利三分彩开奖号码| 易旺彩票www.ywzuqiu.com| www.139421.com-大发快三下载18金| www.345800.com-京彩挂机能赚钱多少| www.491908.com-彩之网双色球开奖| www.600784.com-吉林快三开奖号| www.796827.com-足彩倍投攻略| www.906315.com-陕西的彩票种类| www.9393.loan-河南订婚彩礼多少钱| www.go79.com-好彩双爆珠一条几包| www.rf33.com-中国体育彩票帷胜| www.4eg.cc-体彩快乐彩-| www.029065.com-唐龙说彩怎么关了| www.089006.com-吉林快三k-| www.97oo.com-博彩王要注册吗| www.1183.cc-彩票坑人定律| www.37119.cc-微信彩票竞猜维护| www.96327.com-加盟福利彩票收入| www.86567.com-福彩绝杀和值尾| www.104052.com-彩神88彩票网站| www.126417.com-创彩网邀请码| www.188801.com-内蒙快三跨度和制图| www.283528.com-湖北快三投注计划| www.8925.org-高手彩票下载| www.393078.com-明天的福彩开奖号码| www.503198.com-鸿彩网注册邀请码| www.692881.com-福利彩票数字3单式| www.760218.com-彩票手机端推广| www.814945.com-球彩体育-| www.875009.com-福彩20选8陕西| www.926006.com-区块链彩票深圳试点| www.59ng.com-福彩专业版连线走势| www.65248.com-51计划网一分快三| www.005761.com-神彩趋势软件| www.69kv.com-买彩票能戒掉么| www.058733.com-彩神全能计划软件| www.950466.com-手机福利彩票怎么买| www.358144.com-谁有博友彩邀请码| www.5994.biz-19047期足彩| www.11177.cc-易彩注册账号| www.54584.com-18彩金app-| www.036986.com-时时彩五星缩水在线| www.111637.com-凤凰彩票c978| www.186725.com-牛彩票-| www.281106.com-非法经营彩票案|