QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery实现滑块文字列表展开切换代码

原创商用 jquery实现滑块文字列表展开切换代码

jquery 实现手风琴滑块文字列表切换特效代码布局, js css 分离,结构简单清晰, 下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

3、body引入HTML代码

<div class="homepage">
	<div class="homepage-title">在线教育系统 528项网校功能 让效率翻三倍</div>

	<div class="homepage-body">
		<div class="homepage-container clearfix">
			<div class="homepage-row clearfix " id="cardArea">
				<a href="#" class="homepage-item active">
					<div class="homepage-course-item">
						<div class="homepage-course-title">
							<div class="cou-img"><img src="images/icon001.png" alt=""></div>
							<div class="cou-til">教</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>互动视频</p>
							<p>轻直播</p>
							<p>智能题库</p>
						</div>
					</div>
					<div class="homepage-course-body">
						<div class="course-body-head">
							<div class="tag-img clearfix">
								<i><img src="images/icon001.png" alt=""></i>
								<span>教</span>
							</div>
							<div class="tag-lin"></div>
						</div>
						<div class="course-body-item">
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item001"></i>
									<span>互动视频</span>
								</div>
								<div class="course-body-item-list-text">视频弹题,边学边巩固,让学习更有深度</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item002"></i>
									<span>轻直播</span>
								</div>
								<div class="course-body-item-list-text">轻松应对十万人在线;多平台观看,随时随地学;微信宣传,一键分享</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item003"></i>
									<span>智能题库</span>
								</div>
								<div class="course-body-item-list-text">真题测评、智能组卷、学情分析,提高工作效率</div>
							</div>
						</div>
					</div>
				</a>
				<a href="#" class="homepage-item">
					<div class="homepage-course-item">
						<div class="homepage-course-title">
							<div class="cou-img"><img src="images/icon002.png" alt=""></div>
							<div class="cou-til">学</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>笔记</p>
							<p>问答</p>
							<p>学习计划</p>
						</div>
					</div>
					<div class="homepage-course-body">
						<div class="course-body-head">
							<div class="tag-img clearfix">
								<i><img src="images/icon002.png" alt=""></i>
								<span>学</span>
							</div>
							<div class="tag-lin"></div>
						</div>
						<div class="course-body-item">
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item004"></i>
									<span>笔记</span>
								</div>
								<div class="course-body-item-list-text">知识共享、内容沉淀、知识提炼</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item005"></i>
									<span>问答</span>
								</div>
								<div class="course-body-item-list-text">答疑解惑、实时互动</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item006"></i>
									<span>学习计划</span>
								</div>
								<div class="course-body-item-list-text">系统学习,建构知识体系,学习就像打怪升级</div>
							</div>
						</div>
					</div>
				</a>
				<a href="#" class="homepage-item">
					<div class="homepage-course-item">
						<div class="homepage-course-title">
							<div class="cou-img"><img src="images/icon003.png" alt=""></div>
							<div class="cou-til">管</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>课程管理</p>
							<p>学员管理</p>
							<p>营收管理</p>
						</div>
					</div>


					<div class="homepage-course-body">
						<div class="course-body-head">
							<div class="tag-img clearfix">
								<i><img src="images/icon003.png" alt=""></i>
								<span>管</span>
							</div>
							<div class="tag-lin"></div>
						</div>
						<div class="course-body-item">
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item007"></i>
									<span>课程管理</span>
								</div>
								<div class="course-body-item-list-text">标签化管理,知识结构更科学,让学员轻松找到心仪课程</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item008"></i>
									<span>学员管理</span>
								</div>
								<div class="course-body-item-list-text">轻松应对十万人在线;多平台观看,随时随地学;微信宣传,一键分享</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item009"></i>
									<span>营收管理</span>
								</div>
								<div class="course-body-item-list-text">真题测评、智能组卷、学情分析,提高工作效率</div>
							</div>
						</div>
					</div>
				</a>
				<a href="#" class="homepage-item">
					<div class="homepage-course-item">
						<div class="homepage-course-title">
							<div class="cou-img"><img src="images/icon004.png" alt=""></div>
							<div class="cou-til">聊</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>小组活动</p>
							<p>语音交流</p>
							<p>私信沟通</p>
						</div>
					</div>


					<div class="homepage-course-body">
						<div class="course-body-head">
							<div class="tag-img clearfix">
								<i><img src="images/icon004.png" alt=""></i>
								<span>聊</span>
							</div>
							<div class="tag-lin"></div>
						</div>
						<div class="course-body-item">
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item010"></i>
									<span>小组活动</span>
								</div>
								<div class="course-body-item-list-text">视频弹题,边学边巩固,让学习更有深度</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item011"></i>
									<span>语音交流</span>
								</div>
								<div class="course-body-item-list-text">轻松应对十万人在线;多平台观看,随时随地学;微信宣传,一键分享</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item012"></i>
									<span>私信沟通</span>
								</div>
								<div class="course-body-item-list-text">真题测评、智能组卷、学情分析,提高工作效率</div>
							</div>
						</div>
					</div>
				</a>
				<a href="#" class="homepage-item">
					<div class="homepage-course-item">
						<div class="homepage-course-title">
							<div class="cou-img"><img src="images/icon005.png" alt=""></div>
							<div class="cou-til">销</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>学习卡</p>
							<p>组合营销</p>
							<p>会员成长</p>
						</div>
					</div>


					<div class="homepage-course-body">
						<div class="course-body-head">
							<div class="tag-img clearfix">
								<i><img src="images/icon005.png" alt=""></i>
								<span>销</span>
							</div>
							<div class="tag-lin"></div>
						</div>
						<div class="course-body-item">
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item013"></i>
									<span>学习卡</span>
								</div>
								<div class="course-body-item-list-text">视频弹题,边学边巩固,让学习更有深度</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item014"></i>
									<span>组合营销</span>
								</div>
								<div class="course-body-item-list-text">轻松应对十万人在线;多平台观看,随时随地学;微信宣传,一键分享</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item015"></i>
									<span>会员成长</span>
								</div>
								<div class="course-body-item-list-text">真题测评、智能组卷、学情分析,提高工作效率</div>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">


	"use strict"; !
		function(t, i) {
			var e = {
				id: "#cardArea",
				sid: ".homepage-item"
			};
			i.fn.cardArea = function(t) {
				var t = i.extend({},
					e, t);
				return this.each(function() {
					var e = i(t.id),
						n = e.find(t.sid);
					n.on("mouseenter",
						function() {
							i(this).addClass("active").siblings().removeClass("active")
						})
				})
			};
		} (window, jQuery);

	$(function() {
		$("#cardArea").cardArea()
	});


</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
全红彩票 www.zu77.com-分分彩八码-| www.185083.com-彩868-| www.302309.com-体彩排三选胆图| www.477003.com-时时彩福少做号软件| www.612825.com-全国彩票2开奖公告| www.730616.com-葡京彩票网址| www.269788.com-87彩票官方网站| www.704564.com-779彩票正版| www.811937.com-找一下彩票开奖结果| www.924980.com-快三app官网| www.991965.com-宜昌市体彩兑奖地址| www.an16.com-贵州体育彩票大乐透| www.153759.com-七星彩开奖结果| www.279283.com-老时时彩万位走势图| www.726523.com-美术彩铅画作品图片| www.c33.xyz-贵州快三71期| www.495324.com-衣服用彩漂泡一夜| www.602132.com-80彩票是什么软件| www.690969.com-网易足彩竞猜推荐| www.775823.com-90彩票平台登陆页| www.872689.com-817彩票-| www.948723.com-高频彩票直播网| 500万彩票www.500pt.com| www.707629.com-福利彩票选号范围| www.809790.com-赢彩网正规吗| www.336839.com-今天甘肃快三走势图| www.630863.com-彩票6期倍投技巧| www.793089.com-彩票平刷赚钱技巧| www.947467.com-好彩论坛高手| www.gn09.com-新疆福彩喜乐彩开奖| www.63zi.com-众彩网怎么赚钱| www.587042.com-彩票有哪些平台| www.568822.com-苹果大彩鲸11选五| www.675648.com-新浪爱彩十四场投注| www.94596.com-山西体彩中奖规则| www.7953.biz-彩虹跑玩法-| www.3607.shop-福彩3d南方-| www.906032.com-浙江省福彩网官方| 华彩www.71399t.com| www.838878.com-九亿彩票是真的吗| www.943904.com-乐58彩票官方网站| 非凡彩票www.77210d.com| www.jy72.com-山东体彩网论坛首页| www.020079.com-彩票怎么拖-| www.327559.com-湖北快三开奖结果| www.255527.com-江茹福彩快3| www.339640.com-福利彩票中奖的人| www.398913.com-七星彩论坛南国| www.663.in-今日足彩推荐分析| www.7041.cc-篮球竞彩玩法介绍| www.30057.com-体彩网上购票| www.77991.cc-手机上怎么买快三| www.051726.com-彩八彩票在线| www.630358.com-福利彩票开奖彩票| www.350809.com-高频彩最全的网站| www.496638.com-体育彩票投资多少钱| www.228690.com-北京快三精准计划| www.8340.loan-漫画邪恶3d彩涂| www.333403.cc-微信分分彩官网| www.33jd.com-福彩几点停卖| 中彩网www.81233c.com| www.i65.cn-彩名堂计划软件下载| www.56sy.com-下载七星彩直播开奖| www.1553.pw-福彩7位数中奖规则| www.tz11.com-彩票名言-| www.72bn.com-香港6合宝典彩图| www.2550.shop-k线图彩票分析| www.352829.com-热购彩票网站靠谱吗| www.460049.com-星彩网论坛排列三| www.546644.com-开题彩票店申请书| www.646771.com-彩票是人为-| www.739001.com-体彩福彩全假的| www.4234.website优乐彩好假-| www.336991.com-广东体彩网十一选五| www.lz93.com-足彩皇冠app| www.982375.com-香港时时彩开奖查询| www.ju89.com-简单彩铅画小清新画| www.083939.com-彩票动物总动员玩法| www.37868.com-111彩票应用软件| www.378335.com-时时彩幸运彩| www.864759.com-234彩票官网下载| www.8td.com-两元彩票软件下载| www.689.com-重庆时时彩冷热查询| www.636543.com-中国彩虹5无人机| www.034434.com-cba博彩分析| www.165226.com-成功彩票登入| www.622350.com-彩友网6hcym| www.203895.com-香港正版彩票| www.8914.cm-晋城体彩中奖| www.113859.com-快三计划交流群| www.cy83.com-一分江苏快三下载| www.23597.com-彩票中奖达人杨光华| www.19995.com-河南幸运彩历史开奖| www.028803.com-苏宁彩票app| www.402242.com-快三独胆赔率| www.552377.com-华彩网手机app| www.913695.com-国彩平台注册| www.992383.com-310足彩分析| www.dt82.com-福建福利彩票官网| www.5qs.com-竞彩要交税吗| www.69791.com-福彩排列五预测号码| www.681543.com-下载豪彩娱乐账号| www.811204.com-3d彩票实战讲座2| www.900551.com-7乐彩开奖结果查询| www.265214.com-广西快三怎样| www.833237.com-体育彩票扫码验奖| www.915559.com-手机怎么买福彩3d| www.gw40.com-体彩3p-| www.xi94.com-江苏快三走试图| www.365904.com-水彩颜料排行| www.cai1966.com重庆时时彩网| www.35691.com-体彩门店-| www.600541.com-网上代玩彩票| www.726515.com-自助彩票机如何申请| www.8123.me-北京快三和值多少钱| www.53832.cc-多彩贵州我的家绘画| www.456403.com-彩易达出租-| www.907151.com-快三买和值稳赚吗| www.67692.com-红黑梅方彩票合法吗| www.318944.com-海南快三彩票| www.398885.com-彩神通今日金码| www.501595.com-采全网彩金网彩卷网| www.0js.com-手机天天彩票| www.330785.com-彩票软件赚钱| www.398020.com-淘宝彩票安卓版下载| www.692732.com-彩票平台是骗局吗| www.791045.com-好彩双爆珠零售价| www.865737.com-app23彩票-| www.916670.com-福彩店经营心得体会| www.967193.com-即时开彩免费版最新| 大赢家彩票平台www.351376.com| www.2888.com-购中彩票-| www.123262.com-福彩3d高手贴吧| www.415004.com-彩盈线下娱乐| www.903408.com-手机彩票投注平台| www.999820.com-河北福彩排七开奖| www.jy47.com-苏州快三和值表| www.07dg.com-幸运彩票官网骗子| www.6696.vip-千福彩票网址| www.82837.com-新浪网彩票首页| www.785458.com-银海彩票图库| www.846786.com-单场足彩技术| www.901476.com-k8彩票app下载| www.967108.com-体彩站抽成-| 亿彩堂www.87668r.com| www.069737.com-一分彩规律破解教程| www.ff52.com-酷彩吧彩票正规吗| www.51513.cc-天天彩上海昨晚选四| www.93149.com-105彩票下载网站| www.rn52.com-甘肃快三和值怎么玩| www.282720.com-彩99app下载| www.717060.com-彩铅排行榜-| www.386816.com-凤之彩票-| www.488998.com-中网彩双色球走势图| www.560386.com-爱彩平台-| www.618745.com-足彩关小刀最新推荐| www.802252.com-全国彩票弃奖| www.873150.com-厦门体育彩票店转让| www.932685.com-分分快三是诈骗吗| www.976817.com-菏泽彩礼-| www.cai2333.com湖北快三最新预测| www.539583.com-釉上彩瓷器碗| www.594011.com-福星彩即时开奖结果| www.679847.com-yicai易彩注册|