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天

知道了
9彩注册 天天彩票www.106195.com| www.351139.com-买彩票最多中了多少| www.134666.com-福福彩开奖结果| www.044081.com-百信盈彩票是真的吗| www.778663.com-彩霸王今期图片| www.884993.com-爱乐彩官网正规吗| www.958804.com-多彩网3d字谜| 500彩票www.630477.com| www.911809.com-福利彩票即开型种类| 全民乐彩票www.2934l.com| www.tj60.com-福福利彩票快3江苏| www.716214.com-尼彩i5-| 500万彩票www.638807.com| www.60077.com-七星彩开彩直播| www.185063.com-518彩票网-| www.67ty.com-雅彩彩票可以提现吗| www.3645.vip-福彩哪个奖金多| www.343883.com-每周彩票开奖时间表| www.892849.com-500彩票下载安卓| www.874972.com-福彩快乐十分钟| www.974898.com-七星彩开奖预测最准| www.i43.org-彩票支票怎么兑现| www.69wf.com-手机能打彩票么| www.30og.com-彩虹六号买那个版本| www.127516.com-凤彩网彩票网| www.287990.com-手机彩票合买软件| www.462085.com-好彩网是什么意思| www.595377.com-附近彩票店查询| www.701768.com-彩票店能加盟么| www.867992.com-福星彩库-| www.949187.com-pc彩讯28-| www.104918.com-瑞祥祥云彩票合法么| www.233304.com-北京快三走势图昨天| www.353553.com-哪里能看体彩直播| www.198981.com-彩票赠与-| www.289186.com-神彩网一码网站| www.626055.com-官彩网-| www.781176.com-高频彩票怎么玩能赢| www.930997.com-润联大吉彩票| 500彩票www.957588.com| www.ma34.com-彩票808网-| www.11ve.com-网上彩票怎么举报| www.56197.com-103彩票下载安装| www.011465.com-福利彩票开奖是几点| www.6825.cn-c59彩票官网| www.406646.com-七星彩牛爹定头资料| www.553075.com-足彩8串8什么意思| www.18vh.com-七乐彩开奖时间| www.53ja.com-一张彩票多少钱一张| www.19944.cc-体育彩票国庆放假| www.023684.com-微信凤凰彩票骗局| www.151178.com-香港的彩票网站| www.766802.com-宁波快三彩票| www.906688.com-彩票有一共几个数字| www.995079.com-浙江省彩票兑奖中心| www.uu93.com-高频彩哪个平台正规| www.19nh.com-梦见火追自己买彩票| www.237.live-彩票粉一般上哪找| www.3477.cn-网银怎么买彩票| www.675136.com-体彩推荐号码今天| www.356642.com-员工中彩票608万| www.101877.com-时时彩oa系统出租| www.77336.cc-福彩3d网冠彩彩报| www.941829.com-在彩票店打工怎么样| E彩堂www.43818a.com| www.mg73.com-中国体彩爱乐彩| www.w71.cn-上海快三大小软件| www.58zm.com-彩票走势图用的电视| www.0120.top-彩色是指什么颜色| www.5218.me-免费送彩金28| www.761778.com-山东省彩票兑奖地址| www.yp21.com-大马4d彩票-| www.037332.com-彩经网遗漏值| www.54lx.com-四川省福彩官网| www.9528.vip-北京福彩11选五| www.699844.com-福彩今天开奖公告| www.967143.com-福彩3d藏机图正版| www.295279.com-吉林快三返奖规则| www.079068.com-最新彩票指南彩报纸| www.259188.com-竞彩打水是什么意思| www.5741.vip-玩彩票犯法吗| www.106516.com-彩票今天开什么| www.203083.com-彩神争霸llapp| www.763886.com-全民足彩彩票苹果版| www.878791.com-中国竞彩大奖排行榜| www.972667.com-彩虹共和-| www.731982.com-足彩19030-| www.818464.com-福利彩票领奖要去买| www.912723.com-3d体彩开奖结果| www.973859.com-海南七星彩规规律| www.bi23.com-彩投骗局揭秘| www.451235.com-杏耀彩票下载| www.wp94.com-高频彩票app| www.97113.cc-彩票投注站管理办法| www.56361.cc-香港彩富网| www.989801.com-8816购彩平台| www.173220.com-大发快三有几个平台| www.333580.com-福彩机器键盘功能键| www.509133.com-4157彩民红高手| www.577083.com-彩票可以注销吗| www.642469.com-重庆福彩抽汽车结果| www.709128.com-1305彩票软件| www.779867.com-梦迷接图七星彩| www.849203.com-皇冠足彩官网| www.908050.com-七星彩三个号多少钱| www.961356.com-支付宝里怎样买彩票| 好彩网www.hcw823.com| www.951116.com-天天福彩官网| www.721206.com-新2彩票公式| www.447772.com-龙江福彩下载安装| www.883532.com-福利彩票验票码| www.092689.com-福建官网体彩| www.124071.com-福彩3b基本走势图| www.67fi.com-时时分分彩下载| www.268622.com-彩票3d和直走势图| www.397951.com-0165彩票靠谱吗| www.522732.com-快三大小怎么判断| www.157714.com-足彩盈亏指数应用| www.008982.com-高手彩网-| www.240800.com-大发是不是正规彩票| www.503458.com-彩票一码是什么意思| www.235619.com-手机什么买福利彩票| www.565817.com-3d新福彩-| www.909468.com-唯彩会彩票-| www.378712.com-重庆时时彩平台大全| 豪彩VIPwww.30xw.com| www.93414.com-彩票中奖者故事汇| www.071598.com-福彩代销证变更| www.173970.com-五分快三网-| www.253163.com-36选7好彩1预测| www.fv49.com-福彩快三的规律| www.294385.com-彩票1516网址| www.667485.com-武汉市福彩中心电话| www.68dg.com-多乐快三走势图| www.569921.com-体彩3d开奖查询| www.879800.com-开得最久的网彩平台| www.79sa.com-牛彩网3d总汇| www.3050.bid-金祥彩票网官方网站| www.30218.com-体彩排列三预测汇总| www.39262.cc-分分中彩票苹果版| www.254737.com-118彩票网络平台| www.rb26.com-也买彩app下载| www.3226.vip-丨123彩票-| www.cp6627.com-一分快三技巧和值| www.75115.cc-买彩票是什么行业| www.170328.com-上海快三-| www.079178.com-时时彩高手方法如下| www.152402.com-旺彩百家双色球预测| www.7111.pw-时彩能不能赚| www.155174.com-足彩有哪几种玩法| www.252243.com-彩宝app苹果下载| www.316798.com-体彩图标高清图| www.368086.com-彩铅女童配色| www.433468.com-贵州彩民9000万| www.510758.com-彩虹屁夸女朋友| www.8212.cc-奔腾彩票是什么| www.775811.com-彩计划9cbcc| www.868817.com-七乐彩杀号推荐| www.947347.com-广州彩票软件开发| www.997480.com-快三最高邀请码| www.hy7.cc-霸气的彩票宣传语| www.233516.com-快三精准计划软件| www.316229.com-体彩店怎么开| www.390014.com-259彩票网-|