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.72ih.com-大彩鲸11选5助手| www.8291.cn-天津时时走势图彩经| www.03544.com-七星彩怎么做代理| www.71615.com-福利彩票布衣图库| www.046278.com-中国福利彩票店流程| www.132244.com-濮阳彩礼限高令| www.95wk.com-c彩-| www.111619.com-219彩票-| www.596347.com-足彩的返奖率| www.935922.com-玩时时彩心得体会| www.994431.com-彩票现场开奖| www.bj21.com-神州行彩票-| www.501695.com-体彩刮刮乐大奖| www.461884.com-3d黑彩网专家预测| www.79rw.com-福彩3十1中多少| www.6171.com-武汉福彩申请流程| www.88st.com-体育彩票和福利彩票| www.5842.cm-体彩排列三直选| www.057324.com-福利彩票玩法说明| www.340887.com-1o5彩票网-| www.316952.com-900万彩票app| www.974551.com-众彩网手机端| www.8711.com-大乐透彩票走势| www.85056.com-聚彩彩票提现得了吗| www.613007.com-中国体育七彩乐开奖| www.740072.com-澳门的彩票-| www.889907.com-体彩可以买cba吗| www.977810.com-富彩彩票安全吗| www.9dq.com-彩票怎么领奖| www.914115.com-159彩票网关停| www.528737.com-彩票的复式计算公式| www.650893.com-乐和彩竞彩客服电话| www.775110.com-快三回血的有吗| www.877665.com-购买私彩的处罚| www.975577.com-长沙体彩中心| www.lb38.com-天天爱彩票官网| www.10wj.com-彩票表情图-| www.0007.online135彩票官方网站| www.462946.com-97彩票平台咋样| www.879220.com-95彩票是不是骗局| www.902.cm-彩票中3000万| www.636117.com-彩虹真美阅读及答案| www.819586.com-网络彩票分析师招聘| www.927806.com-广东快中彩开奖记录| www.983243.com-众彩中彩-| www.ey8.com-重庆时时彩走势图| www.807713.com-中国彩票是最大诈骗| www.883822.com-新瑞博彩票-| www.954174.com-礼拜五开奖的彩票| 彩票5www.534638.com| www.166017.com-旺彩大乐透开奖结果| www.378418.com-a彩娱乐登录注册| www.537630.com-彩色的造句子一年级| www.616005.com-关于卖彩票的小程序| www.500925.com-少儿彩色画-| www.563754.com-中彩网要邀请人吗| www.070848.com-温州12选5快乐彩| www.6043.cc-足球彩票360| www.6nc.com-靠谱彩票软件下载| www.211956.com-我去彩票站平台诈骗| www.435449.com-彩票33-| www.723170.com-镇江体彩中心电话| www.904233.com-附近福利彩票投注点| www.cp846.com-幸运快三有什么猫腻| www.319808.com-易彩娱乐福地登录| www.916205.com-致富彩票主页| www.00xg.com-人造彩虹的实验过程| www.822500.com-竞彩论坛空间| www.839157.com-网易彩票注册| www.021625.com-3d彩吧图厍第5版| www.176076.com-江苏快三破解器下载| www.4559.cn-海南七星彩最准杀号| www.234928.com-江西快三开奖平台| www.971123.com-彩票有哪些类型| www.423596.com-福彩门户资料大全1| www.58763.cc-怎么办福彩积分卡| www.031990.com-阿里彩票开多久了| www.215622.com-福利彩票一共几位数| www.202526.com-贵州福利彩票招聘| www.589077.com-粤海开开心心彩票网| www.68ux.com-福利彩票胆拖价格| www.950778.com-中彩网三d试机号| www.zs18.cc-买彩票压大小稳赢| www.6036.xyz-657彩票网app| www.31211.cc-买时时彩能不能赚钱| www.9854.pw-青苹果彩铅画| www.701908.com-竞彩足球唯彩网| www.083198.com-官方快三是什么| www.sa2.cc-快三跨度选号技巧| www.888498.com-网易买彩票的app| www.973575.com-彩虹的图片自然风景| 众乐彩票www.684244.com| www.jt21.com-四季彩怎么提现不了| www.c89.net-百宝彩账号怎么申请| www.32bm.com-雨后彩虹头像图片| www.0607.vip-彩票为什么不好中| www.xi94.com-江苏快三走试图| www.12557.com-福建省福彩中心主任| www.004022.com-彩票大赢家预测号码| www.188299.cc-安徽快三走势图和值| www.223.online-淘彩票邀请码多少| www.399554.com-七星彩老鼠精版最新| www.299342.com-彩票手机软件哪个好| www.588655.com-开开心心七星彩网| www.265418.com-彩经网3d最小值| www.517159.com-最新七星彩开奖结果| www.705545.com-辽宁体彩兑奖在哪| www.999904.com-福彩排列五玩法介绍| www.415741.cc-uc彩票纽约28| www.770243.com-黑彩输了几十万| www.931229.com-足彩大神跟单app| www.lo0.com-内蒙古快三二码| www.11ii.com-体育彩票有骗局吗| www.4563.org-福彩七星彩第35期| www.012608.com-七星彩廉江好彩体彩| www.7938.wang-京彩计划-| www.129699.com-福彩可以网上投注吗| www.27205.com-青青海快三开奖结果| www.009475.com-骰子彩票合法| www.322125.com-彩票计划软件有哪些| www.79kx.com-彩乐园2在哪下载| www.034043.com-七乐彩那一年发行| www.00692.com-中国彩民更懂彩| www.560654.com-真钱棋牌送彩金| www.331599.com-乐彩网一分快3| www.520717.com-中国福利彩票发展史| www.365365.cc-极速赛车彩票怎么玩| www.613365.com-彩虹六号腾讯手游宝| www.009296.com-体彩任选九开奖结果| www.095700.com-福彩什么-| www.218058.com-共赢彩票网-| www.309599.com-体彩阿四荐号| www.417421.com-如何开卖彩票的店| www.544696.com-粤淘彩票是黑组织吗| www.630433.com-下载全民彩票| www.700268.com-下载e彩乐-| www.786278.com-昨日彩票号码| www.868948.com-七星彩是怎么买的| www.952490.com-越战越勇中两次彩票| PK彩票www.534554.com| www.ri14.com-七乐彩怎么中奖| www.43zk.com-时时彩半顺最长遗漏| www.778.win-彩神v外挂下载| www.5269.cc-智彩电子图-| www.08977.com-短信彩票-| www.556788.com-体育彩票加盟多少钱| www.751234.cc-赛车彩票首页| www.855117.com-甘肃微信彩票群| www.073226.com-福彩彩票游戏规则| www.521201.com-福彩双色球彩票| www.518708.com-双色中彩网彩网| www.802314.com-福彩3d开奖给果| www.877522.com-时时彩专家网站| www.131542.com-安阳彩礼一般给多少| www.141360.com-分析列表彩吧论坛| www.325726.com-万彩吧c8cn网址| www.465426.cc-古建旋子彩画图案| www.363267.com-福建彩票中奖排行榜| www.565359.com-保时捷彩票是真的吗| www.746128.com-福利彩票游戏厅| www.977503.com-江苏快三总共几期| www.ot47.com-网络彩票新政策| www.3640.cm-鸿彩可靠吗-| www.08858.cc-彩02彩票apk|