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.71562.com-福利彩票怎样中奖| www.377752.com-体育彩票店电话| www.ch60.com-快三吉林省开奖| www.81aq.com-彩铅画花朵图片简单| www.505723.com-玩彩票我们是专业的| www.624202.com-黄金彩app-| www.720873.com-彩票数字之间的规律| www.971707.com-菜彩票开奖查询| www.cp2819.com-宝马彩app下载| www.734555.com-今晚中彩结果| www.pd1.com-吉林快三和值走| www.192002.com-河南快三万能三码| www.788631.com-河南彩礼为何这么高| www.966539.com-雪缘园足彩比分直墦| www.tk63.com-信誉第一的足球彩票| www.874121.com-大彩最新开彩成绩| 9号彩票www.80767f.com| www.0973.org-福彩扫一扫看中奖| www.4703.vip-10元投资彩票赚钱| www.101914.com-中原彩票首页| www.ij35.com-福利彩票app| www.4567.cn-七乐彩35期号码| www.29962.cc-亿彩app下载安装| www.131785.com-山西忻州彩礼及陪嫁| www.375028.com-五分⑥和彩方法| www.773714.com-快3彩票分析软件| www.227072.com-大发快三开奖号| www.459022.com-新淘彩官方网站| www.700549.com-七星彩开奖直播网| www.h24.link-沈阳快三走势图| www.39119.com-快三私彩-| www.435204.com-竟彩足球受注赛程| www.595185.com-福彩三d双彩图| www.250305.com-时时中彩app| www.hc69.com-河南体育彩票| www.44134.com-大乐透彩票专家推荐| www.99362.cc-特彩吧app黄大仙| www.933711.com-贵州快三遗漏统计| www.985283.com-福彩三d赵公明| www.ix0.com-内蒙古快三官方下载| www.nu80.com-头奖彩票-| www.4uo.com-福彩快3中奖查询| www.693913.com-体彩有效期-| www.795826.com-云南快三开奖规则| www.893033.com-体育彩票足彩| www.959654.com-彩票战狼挂机计划| 500彩票www.51515z.com| www.tt68.cc-高频彩合买彩票平台| www.2995.pw-彩票3d字谜马后炮| www.681880.com-网上还能买彩票吗| www.324381.com-乐彩网预测靠谱吗| www.444964.com-凤岗福利彩票网点| www.498858.cc-01彩票网站-| www.205342.com-一分快三大小规律| www.43ud.com-喝彩的解释是什么| www.539976.com-快乐彩助手-| www.4979.biz-彩色苹果笔记本电脑| www.97258.cc-福彩今晚的开奖号| www.hr7.com-快三屠龙最多多少期| www.278051.com-上海快3开奖爱彩乐| www.182.cm-运用统计学推算彩票| www.3386.live-彩金可以换黄金吗| www.636790.com-重庆时时彩选号工具| www.9965.top-七星彩排列五开奖表| www.299981.com-中彩软件-| www.392228.com-福彩3d有123吗| www.cai7366.com上海快三今天| www.72894.com-胜负彩预测分析| www.069110.com-彩之星下载专区| www.378688.com-天天福彩软件下载| www.718.biz-竞彩推荐表格制作| www.333023.com-体彩三d开奖结果| www.514940.com-彩妆加盟店视频教程| www.180904.com-旺彩软件大全| www.261826.com-福彩3d彩票两元网| www.456742.com-k彩彩民中奖福地| www.570850.com-上海福彩15选5| www.188912.com-安徽快三预测号码| www.fo60.com-体彩开奖视频| www.122990.com-福彩公益金项目调整| www.194691.com-大发快三计划网页版| www.266604.com-时时彩遗漏怎么追| www.359139.com-微博上买彩票靠谱吗| www.058900.com-机选彩票中奖率| www.99bc.cc-彩票大小软件| www.98cj.com-彩票对冲避免被风控| www.81dn.com-冮苏体彩7位数| www.136592.com-淼鑫彩票网页| www.661491.com-易彩票是什么| www.398353.com-每周几七星彩开奖| www.598234.com-彩票可以刷水吗| www.703684.com-澳超竞彩资讯| www.811262.com-网络非凡彩票骗局| www.917479.com-双色球杀号彩客网| www.979976.com-福彩网站资讯搜索| www.ed27.com-彩票话术900| www.zl09.com-彩票中奖新闻最近| www.428400.com-国外竞彩篮球| www.5792.biz-竞彩过关方式2×1| www.23445.com-彩票一注一百倍| www.60wj.com-兔费下载福彩三d| www.097760.com-微信带玩江苏快三| www.255766.com-k彩福地线路测速| www.373654.com-绿好彩是薄荷烟吗| 吉利彩票www.80075x.com| www.313004.com-038彩票手机登录| www.380833.com-我要看七乐彩开奖| www.474342.com-竞彩推荐众彩网| www.553300.com-湖北武汉快三开奖| www.996313.com-网易彩票开奖中心| www.pw72.com-西官彩-| www.021909.com-神州彩票app登录| www.vo35.com-快三遗漏查询| www.517.com-环球一号彩票手机版| www.948657.com-手机没电了买彩票| 500彩票www.50080s.com| www.087111.com-五福彩新版下载| www.588198.com-波彩之家网络| www.675866.com-今天福利彩票的结果| www.890685.com-至尊时时彩票平台| www.976694.com-宜宾彩礼-| www.xt2.com-真正玩彩票赚钱的人| www.pi57.com-陆慧明足彩任九新浪| www.36wh.com-万人彩彩票-| www.173771.com-瑞彩祥云官网| www.650295.com-彩虹伞对幼儿的好处| www.400385.com-竞彩足球最新分析| www.528175.com-彩票之家是什么| www.664253.com-福彩三a谜语总汇| www.759488.com-百盈彩票正规吗| www.827878.cc-3d福彩图迷汇总八| www.901610.com-体彩排列五综合| www.969653.com-快三第一门户k3t| 亿发彩票www.901591.com| www.452772.com-体彩大乐透3+0| www.685505.com-福彩3d进位和差表| www.775957.com-彩票三期计划怎么打| www.026591.com-幸运中彩票app| www.315921.com-欢乐七天彩下载| www.440570.com-体育彩票是虚假的吗| www.89lm.com-aicai艾彩-| www.816729.com-今天彩票出什么号| www.132434.com-各地彩礼限高的规定| www.427288.com-足彩加最新版本| www.7160.vip-时彩买必出号的技术| www.22959.cc-语文课文中彩那天| www.543446.com-庭审现场东北彩票王| www.346676.com-易彩网3d字谜| www.234167.com-福彩中心开机号| www.363393.com-彩虹是什么生肖| www.80132.com-博彩龙虎怎么玩| www.932578.com-大发快三有多少平台| www.09350.com-鴻鼎彩票登录| www.3579.cn-白菜送彩金大全网站| www.3305.vip-天天彩票金管家| www.523897.com-福彩快乐12怎么玩| www.195068.com-体彩彩票怎么看中奖| www.048382.com-3d报纸彩版图| www.128346.com-分分快三输钱| www.tr52.com-万彩网网赚是真的吗| www.50633.com-七星彩票网-| www.241292.com-七星彩全年包码| www.698041.com-杭州福彩站点| www.781434.com-中原福利彩连连乐|