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天

知道了
百盈PK10 www.378095.com-彩虹世界电脑版下载| www.807804.com-彩票中奖的图片| www.892181.com-武汉高频彩11选5| www.967555.com-体彩排列五随机选号| www.bp05.com-快三选号助手| www.401978.com-新版一定牛彩票网| www.529055.com-溢彩是什么意思| www.619173.com-老牛足彩-| www.897046.com-秒速高频彩长龙提醒| www.177550.com-赵公明3d彩票预测| www.3ol.com-492天天彩票论坛| www.003850.com-江苏快3彩盈网| www.168978.com-内蒙古快三投注| www.415600.cc-网上彩票赌大小单双| www.089951.com-江苏快三最多连开| www.250618.com-中彩啦买彩票安全吗| www.64044.com-竞彩足球跟单软件| www.673752.com-古建筑彩绘怎么画| 快乐彩票www.320055.com| www.081220.com-数字型彩票实战技巧| www.241794.com-七星彩怎么玩法介绍| www.se67.com-腾讯十分彩走势图| www.367861.com-彩铅飞翔的鲸鱼| www.866787.com-福彩近期开奖号码| 凤凰彩票www.77801l.com| www.85vd.com-正规福利彩票盈利| www.17897.cc-竞彩足球比分胜平负| www.291751.com-鸿彩网址-| www.423722.com-泰国彩票官网| www.179422.com-杏彩168彩票网| www.261350.com-时时彩稳赚不赔绝招| www.40bj.cc-七星彩近300期| www.602385.com-易彩唐怎么玩| www.1522.win-福彩3d3d结果| www.629596.com-赢钱彩是什么| www.995609.com-竞彩足球信息| www.ri32.com-七乐彩奖金说明| www.5558.vip-幸福彩手机报3d| www.562301.com-爱中彩票客服微信| www.668613.com-体育足球彩票怎么看| www.783581.com-非法彩票平台| www.910058.com-福彩3d百万通下载| www.nb40.com-11选5爱彩乐浙江| www.923456.cc-彩票吃票-| 500万彩票www.96386e.com| www.90dy.cc-十大博彩公司188| www.057654.com-七星彩卖到几点钟| www.971472.com-重庆福彩手机报下载| www.pe32.com-吉林快三一把一结| www.47tx.com-微信体彩在哪里| www.96833.com-3d彩票网站查询| www.114704.com-贵州省彩票十一选五| www.804858.com-彩虹的小符号| www.916590.com-什么彩票平台稳定| www.22425.com-男方提出分手彩礼| www.19821.cc-为什么玩私彩赢不了| www.633315.com-内蒙时时彩开奖票控| www.128671.com-快三秒总部电话| www.41bc.com-龙虎时时彩走势图| www.560110.com-澳门快三怎么玩| www.688907.com-移动彩票注册不了| www.696357.com-时时彩官方开奖公告| www.57847.com-旺彩社区3d绕胆图| www.723576.com-昆山福利彩票转让| www.0841.xyz-哪可以买足彩| www.034605.com-赢彩计划下载安装| www.208655.com-大发快三出龙的规律| www.060667.com-彩票公司合法的吗| www.3600.com-大唐娱乐彩票| www.458058.com-福利彩票店挣钱吗| www.1214.cc-天津福彩快乐10分| www.8443.cc-彩票最高那个| www.41724.com-福彩3d赢钱方案| www.99273.com-内蒙时时彩软件| www.kq26.com-360彩票3d走势| www.387402.com-体彩改革-| www.n31.com-京彩app哪里下载| www.719016.com-双彩虹怎么形成的| www.817292.com-ig传统彩平台大全| www.885190.com-新2彩票论坛| www.968983.com-网易足球胜负彩| www.cp9388.com-快三单双关系加减一| www.64098.com-胜负彩姜山冷门| www.367783.com-水彩星空教程| www.91993.cc-1元丰彩-| www.932990.com-福彩快三的秘密| 361彩票www.361770.com| www.nh39.com-成功彩票vip| www.p36.cc-中华彩票报纸| www.2842.cn-河南快三星号| www.65907.com-好彩三八-| www.uw83.com-q彩网怎么下载安装| www.20xn.com-彩名堂手机客户端| www.89qc.com-安卓彩票马甲包源码| www.3267.biz-中国快三网合法么| www.8838.loan-彩投彩票注册| www.ns13.com-福彩2019027| www.63fa.com-福彩九宫寻宝图| www.5369.biz-手机购快三-| www.31au.com-快彩20分钟一期了| www.0286.biz-彩票推销-| www.327722.com-七星彩走势图带联线| www.15508.com-台州福彩网-| www.7232.cc-彩虹六号墨冰| www.38221.cc-彩天下平台代理| www.820619.com-福彩双色球参选数据| www.285343.com-彩票尾规律-| www.472178.com-宝利彩票怎么样| www.712953.com-怎么注册百事彩票| www.923038.com-中国体育彩票店| www.038093.com-金牛彩票app| www.159091.com-体彩大乐透随机选号| www.81wh.com-竞彩往期冷门| www.9897.me-河南福彩官网走势图| www.5iv.com-常州福彩点-| www.002197.com-七乐彩到哪里兑奖| www.9303.vip-七乐彩最新杀号公式| www.762677.com-极速75时时彩软件| www.908712.com-90彩票大发快三| 吉利彩票www.80075p.com| www.0616.cn-七星彩规律的app| www.287513.com-优彩区44oo44| www.914431.com-彩票166是真的吗| 中华彩吧www.3207.com| www.631362.com-爱彩人彩票网下载| www.714500.com-凤凰快三官网| www.93616.cc-中国竞彩网推荐号码| 豪彩VIPwww.hc2788.com| www.431389.com-什么是葡京彩票| www.545453.com-福彩快乐十分任选三| www.uj54.com-大赢家彩票靠谱吗| www.27qh.com-错过了彩票一等奖| www.ae74.com-彩票接口-| www.508.cm-彩61是什么-| www.624190.com-乐彩33平台-| www.75mz.com-彩票快乐什么| www.876632.com-内蒙古快三链接| www.985215.com-中国彩软件是真的吗| www.cm60.com-今日河北快三推荐号| www.89pa.com-6号彩票论坛| www.807542.com-体彩足球胜平负| www.929073.com-众盈彩合法正规吗| 福彩www.2109s.com| www.34yy.cc-体彩p3和值走势图| www.445773.com-nba精彩时刻| www.620445.com-中国山东福彩网| www.870944.com-七星彩双期走势图| www.a55.pw-快三庄家-| www.93vs.com-六堂彩网站大全| www.804.cn-彩虹代刷官方网站| www.5408.xyz-彩票行业什么样| www.2388.win-查七乐彩开奖结果| www.187166.com-分分时时彩app| www.7298.cn-重庆时时彩做号安卓| www.920728.com-百万彩票首页| www.4893.cm-体彩3d遗漏号| www.838444.cc-竞彩篮球害人| www.895149.com-百姓彩票站长| www.951923.com-彩天下彩票靠谱么| www.985339.com-皇冠竞彩是什么| www.qx.com-北京福彩快3app| www.311047.com-红旗彩票首页| www.774441.com-简单水彩画教程星空| www.957616.com-爱彩乐彩票数据提醒|