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.25in.com-华彩益彰-| www.1717.cn-开户彩金不限ip| www.7820.pw-福星新星彩-| www.28481.com-阳光世纪园中彩票| www.73588.com-搜索足彩必发指数| www.1486.net-老时彩开奖结果| www.9719.biz-彩客骗局揭秘| www.104211.com-乐彩网是坑人的吗| www.233464.com-众彩彩票首页| www.310775.com-掌上彩票-| www.454779.com-世界四大博彩公司| www.562883.com-天天体彩网-| www.644167.com-足彩串关表-| www.722947.com-阿里彩票入口| www.419889.com-赢彩票平台安全吗| www.529590.com-香港彩神网站| www.653185.com-高频彩票时间调整| www.737698.com-今天3d彩报图库| www.825811.com-福彩3d李白胆码| www.895822.com-福利彩票合买中心| 大赢家彩票网www.339752.com| www.707172.com-彩票app制作成本| www.797273.com-八码彩票-| www.883121.com-足彩任九胆拖| www.958465.com-甘肃体彩手机在线| 500万彩票www.03500w.com| www.329365.cc-贵州桐梓彩票中奖| www.855974.com-新西兰快三官方网站| www.cai568.com-福建快三今日开奖| www.38.cm-体彩三句话2017| www.227003.com-五分快三走势| www.356538.com-体彩排列三过滤器| www.539038.com-众乐彩票靠谱吗| www.736111.com-一起彩票app| www.pb85.com-河北快三三通号遗漏| www.6824.cc-极速3d彩票官网| www.028684.com-贵州体彩快三| www.140203.com-99cc赢彩彩票| www.286041.com-信誉第一的足球彩票| www.391492.com-天玺彩票在哪里买| www.994368.com-微彩在线是骗局吗| 彩宝www.cb7188.com| www.hn63.com-甘肃快三昨天走势图| www.yv03.com-491彩票资料| www.41rp.com-3d彩吧彩报笫三版| www.131371.com-信阳的彩礼-| www.234702.com-中彩那天的课文内容| www.332859.com-手机彩票凤凰网| www.428571.com-一分一期的彩票| www.568914.com-做梦自己彩票中奖了| www.os89.com-彩店宝官网-| www.899389.com-84彩票app-| www.vz81.com-腾讯时时彩开奖结果| www.6952.pw-七星彩千位杀号定胆| www.506137.com-大乐透预测杀号彩吧| www.28085.com-新未来微信彩票| www.77204.com-彩票中奖可能性| www.131262.com-结婚彩礼清单| www.277982.com-啥叫福彩快三| www.629877.com-77彩票手机版77| www.g33.top-106彩票时时彩| www.95ec.com-多彩投和开始吧| www.9393.hk-江西彩礼排行榜| www.030971.com-大马彩票是合法的吗| www.215102.com-瑞彩祥云下载地址| www.345150.com-彩票互联网重启| www.490195.com-传诚彩彩票-| www.603004.com-彩虹六号怎么禁播了| www.742922.com-奖多多足彩软件下载| www.953043.com-球探彩票官方| www.rn1.com-河北省福彩11选五| www.25.la-快三一天几期| www.631508.com-泗阳好彩头食品招聘| www.795385.com-彩票怎么领奖流程| www.954315.com-西京时时彩新疆| www.rl1.com-广东体彩十一选五| www.9oe.com-彩票店的装修| www.31832.cc-金誉彩票网vip3| www.017814.com-2元彩票3d走势图| www.123054.com-彩票计划平台| www.257355.com-微彩站-| www.374438.com-彩票3d排列三| www.538240.com-快速时时彩-| www.786640.com-微信体彩机充值| www.963044.com-微信投注彩票| www.ey66.cc-时时彩开奖助手苹果| www.0515.com-大马彩票开奖查询| www.23955.com-福彩3d彩乐乐预测| www.66259.com-彩宝网双色球开机号| www.15289.cc-彩虹周杰伦-| www.479978.com-7星彩开奖结杲| www.804407.com-p3双彩图-| www.6377.net-竞彩猫推荐-| www.016930.com-有人拉我做uc彩票| www.cai4422.com中国福彩快3内蒙| www.445200.com-丽水市福利彩票中心| www.021848.com-福建彩票双色球规则| www.908039.com-河北福彩3d字迷| www.982531.com-市福彩中心在哪里| www.413838.com-腾讯分分彩八码计划| www.f16.com-新加坡彩票中奖规则| www.04827.com-谁知道在哪里买足彩| www.630514.com-中国彩票事件| www.76wv.com-9b彩票登陆-| www.gq53.com-快2彩票技巧| www.09uf.com-老彩民高手公式论坛| www.89857.cc-七乐彩100走势图| www.569996.com-彩票三d开奖多少钱| www.7395.cn-新开的体彩店没竞彩| www.58eu.com-朗读中彩那天| www.uk94.com-内蒙古福彩网站| www.381178.com-礼拜五有什么彩票| www.620398.com-江苏开奖快三| www.09ld.com-玩彩的是什么工作| www.422.bid-乐盈彩票从哪里下| www.120766.com-彩票投注站文库| www.23319.cc-盈彩彩票官方网站| www.460906.com-买彩票中奖怎么办| www.945466.com-体彩顶呱刮7| www.653374.com-彩票性缘网盘百度云| www.q61.org-连中彩票手机版下载| www.3719.xyz-网易七星彩跨度| www.31517.cc-买彩票的大神| www.356282.com-彩票送钱活动有哪些| www.44df.com-出彩词语-| www.3309.tv-138迪斯尼彩乐园| www.588922.com-江苏福利彩票十五| www.830661.com-会员登陆顶级彩票| www.261164.com-众博彩票怎样| 500彩票网www.933509.com| www.167312.com-快三是干嘛的| www.786231.com-全民彩票怎样破解| www.mq89.com-旺彩3d下载-| www.881135.com-三d走势图彩吧助手| www.765523.com-千禧彩票网-| www.752970.com-哪个彩票app好用| www.861797.com-xm彩票-| www.0416.date-体彩大乐偷透| www.218002.com-易彩软件-| www.15863.com-玩华夏彩票有多少人| www.93819.com-彩票开奖查询上一期| www.089711.com-大发快三代打| www.155189.com-足彩19043期| www.234886.com-福彩3d怎么玩| www.312585.com-ios买彩票-| www.480091.com-奥奥客竞彩网| www.565598.com-附近竞彩网点查询| www.681927.com-彩票出票后注销流程| www.881564.com-泰国利记博彩| www.999661.com-什么网站可以买彩票| www.80rs.com-北控国彩合法吗| www.2416.vip-哪里有快三直选| www.021541.com-新宝5彩票网站| www.322370.com-乘风网彩票靠谱吗| www.378442.com-天空彩票幸运彩涂| www.471442.com-泊利彩票百度百科| www.606479.com-长沙福彩中奖| www.01lk.com-新彩福彩字谜| www.69ig.com-国乐彩苹果机下载| www.738.space-u9彩票安卓版| www.3778.biz-竞彩篮球实时比分| www.8337.org-七星彩手机软件| www.41947.com-下载送18彩金| www.73915.com-彩票半全场怎么玩|