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.061122.cc-体彩三地开奖结果| www.771222.com-福彩买法-| www.29uo.com-简单彩铅山水画| www.7199.com-快三中两个有奖吗| www.kj08.cc-福利彩票怎么选号| www.779407.com-福彩开奖预测结果| www.850284.com-腾讯5分彩开奖网址| www.bz1.cc-app彩票软件| www.318935.com-江西福彩中大奖| www.37559.com-新华彩票77-| www.qs73.com-千亿彩票网址| www.144.cn-夸人漂亮的彩虹屁| www.13875.com-网易足彩推荐分析| www.464095.com-体彩平台是不是骗局| www.555423.com-新快三遗漏360| www.505.online-黑彩平台幕后| www.625238.com-51彩票是真是假| www.164477.com-竞彩篮球推荐预测| www.57607.com-杏彩娱乐官网| www.760334.com-拉萨快三走图| www.886286.com-古风彩铅手绘女| www.994450.com-ios版好彩客| www.04ub.com-吉林快三心得| www.961.cn-彩票计划倍投方法| www.8238.in-基诺彩彩票开奖记录| www.339764.com-中华彩票软件下载| www.406063.com-秘鲁彩虹山的形成| www.75zk.com-体彩八卦图-| www.297161.com-乐购彩票是黑平台| www.468822.com-红姐图库彩图图库库| www.078967.com-七星彩计算机公式| www.8609.wang-足彩比分直播完整版| www.0701.tv-足彩滚球让1球胜| www.5262.cc-uc优彩网-| www.397202.com-体彩3地出什么| www.417828.com-彩票店转让费| www.178065.com-北京快3走势图彩票| www.933104.com-众信国际彩票| www.kg52.com-福彩中心3d开机号| www.91gn.com-彩民做梦中奖故事| www.9870.cn-彩票买两张同样的| www.006047.com-贵州快三遗漏查询表| www.950221.com-金牛彩票网站安全吗| www.pb39.com-天津11体彩-| www.ln43.com-中彩情报网网站| www.cp8577.com-上海福利彩票网| www.c84.cn-快三线上是真的吗| www.36658.cc-澳门博彩股-| www.bg57.com-足球博彩app| www.593790.com-七彩汇娱乐是真的吗| www.731920.com-北京百姓彩票网站| www.868532.com-北京快三反水| www.969145.com-挤占挪用福彩公益金| www.nj67.com-福彩预测-| www.69ra.com-奥马彩票-| www.5709.vip-宋代三彩-| www.72365.com-云南省福彩网| www.no24.com-福彩3地丹东图| www.133349.com-彩钢瓦围挡效果图| www.315340.com-c8万彩吧-| www.500221.cc-网络彩票开售新闻| www.636760.com-有关彩虹的童谣| www.770182.com-好彩头官方下载| www.895466.com-网投彩票可靠吗| www.995885.com-竞猜足彩310| www.sp17.com-苏州福彩快三一定牛| www.971124.com-福彩都有哪些种类| www.04ms.com-彩票开奖杳5| www.35577.cc-快三黑号红号有哪些| www.048858.com-3d小小鱼版彩吧图| www.dt44.com-6b彩票-| www.21hy.com-9d彩票官方-| www.796754.com-在淘宝买彩票怎么买| 彩82www.c7238.com| www.397522.com-福彩3d怪字帖吗| www.019694.com-大公鸡七星彩奖表图| www.dd66.com-上海快三爱彩乐| www.44qm.com-时时彩半顺的玩法| 大玩家彩票www.84499j.com| www.376999.com-福彩8加1多少钱| www.04mc.com-兰州市体彩中心| www.7238.biz-彩虹六号第二年季票| www.571098.com-彩票开奖伴奏音乐| www.656277.com-七星彩清明节| www.740744.cc-澳博集团博彩能信吗| www.818586.com-河北邢台福彩中心| www.jr86.com-澳洲时时彩人工计划| www.3km.com-彩漂粉有毒吗| www.583762.com-类似彩神国际| www.734.live-时时彩机选在线| www.986.cm-那个彩票平台好| www.120466.com-山西宝马彩票案| www.230553.com-玩江苏快三犯法吗| www.388099.com-足球9场胜负彩奖金| www.625795.com-湖北快三购买技巧| www.723965.com-湖北快三高频彩| www.651594.com-大发快三彩票破解术| www.761956.com-彩播app-| www.nd94.com-怎么举报网络彩票| www.790176.com-炫彩是什么-| www.852385.com-福建体彩十一走势图| www.930689.com-彩票1万要交税吗| www.976194.com-彩礼四万寓意好不好| 众彩www.658960.com| www.090777.com-刚力彩芽电视剧| www.924061.com-乐亿彩票平台app| www.fm97.com-深圳福彩官网下载| www.17so.com-今日七乐彩走势图| www.32020.cc-易彩堂app苹果版| www.ap90.com-遵义市福彩-| www.316908.com-彩票右上角字母含义| www.683087.com-什么平台可以买彩票| www.42738.com-易网红彩app官网| www.845688.cc-足球彩票中奖怎么算| www.125364.com-福利彩票购彩软件| www.268683.com-佳缘出现彩票骗局| www.376323.com-安徽彩票开奖结果| www.566439.com-彩虹6号按什么说话| www.654777.com-东方彩票可能吗| www.962640.com-精英彩票下载| www.uy1.cc-彩票123安卓版| www.61pj.cc-七星体彩开奖结| www.224411.com-全发国际彩票是什么| www.671005.com-国彩86552-| www.567461.com-彩虹4号无人机| www.662233.com-乐8网彩票是真的吗| www.820656.com-彩钢瓦的规格及型号| www.894850.com-内蒙体育彩票| www.971495.com-3d彩吧44462| www.cai1233.com福彩快3中奖规则| www.322264.com-福利彩票147期| www.227271.com-重庆快三群骗局揭秘| www.116414.com-彩吧图第三版答案| www.208311.com-美国彩票十大巨奖| www.451298.com-体育彩票害人输千万| www.590050.com-足彩竞彩比分计算| www.754828.com-江西福彩中奖规则| www.867373.com-彩票网上全部停售吗| www.975604.com-农村彩礼-| www.cp9818.com-福利彩票快三走势| www.96ha.com-彩之堂官网-| www.ia79.com-彩票坊被骗-| www.zf40.com-福彩3d报纸图今天| www.16kn.com-竞彩分析师兼职文章| www.590440.com-福彩跨度和值3d| www.688905.com-移动彩票网址是多少| www.028240.com-梦想彩票站下载安装| www.yy34.com-乐盈彩app-| www.16ky.com-大象彩票网登录| www.309222.com-美女带着买彩票骗局| www.81vx.com-江西福彩3d走势图| www.9wm.cc-11选五大彩鲸官方| www.176729.com-福彩快三输了50万| www.288651.com-网投彩票砍龙技巧| www.142755.com-爱彩站-| www.174424.com-河北快三走势图表带| www.280085.com-五星彩票开奖号码| www.65au.com-体彩7彩星开奖结果| www.365910.cc-彩经网排三遗漏分析| www.20234.com-彩票谁在控制| www.64443.cc-外围体育竞彩app| www.376617.com-最快的彩票开奖平台| www.3143.cm-北京体彩能买多期吗| www.6919.org-七彩阳光背面演示|