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天

知道了
58福彩 www.466516.com-秒秒彩是-| www.180776.com-湖北快三电视走势图| www.81848.cc-时时彩五码遗漏| www.909964.com-彩界小狂人-| 澳客彩票www.104ak.com| www.630556.com-海南七星彩规律论坛| www.741838.com-公彩和私彩是什么| www.883222.com-鸿彩彩票app| www.955117.com-易记彩票破解| www.cai6602.com体彩排列三走势图| www.gi04.com-用哪个app买彩票| www.00yv.com-福利彩票选4开奖| www.16ao.com-幸运彩pk10-| www.954.in-网易彩票手机版试玩| www.70028.cc-广东十分彩技巧大全| www.085054.com-彩票苹果版下载| www.31282.com-呼市福彩彩票中心| www.148881.com-青岛快三假的| www.598236.com-22彩票cc-| www.092583.com-福建体育彩票app| www.76333.com-体彩客户端未开通| www.080511.com-大吉彩票app| www.164905.com-玛雅吧彩票游戏网站| www.420534.com-金手指南胜负彩| www.833515.com-福彩平台网站| www.918854.com-澳门博彩税-| www.137602.com-怎么举报福彩| www.177890.com-快三害死人-| www.250047.com-彩易科思app下载| www.43095.com-彩票双色球几点停售| www.19wg.com-分分彩倍投表平刷| www.4582.net-福利彩票怎么买中奖| www.73316.cc-刚力彩芽为什么被黑| www.060012.com-体彩云南十一选五| www.156057.com-好彩网是不是诈骗| www.235221.com-体彩竞彩加微信| www.84ba.com-怛大彩票-| www.33kq.com-2元彩3d走势图| www.652087.com-葡京彩票注册平台| www.89225.cc-福利彩票随机选号器| www.yc01.com-七星彩历史开奖| www.13881.cc-快三平台论坛| www.77042.cc-e乐彩登录与注册| www.245898.com-大发快三彩票首页| www.953908.com-大神彩票-| 尊彩www.083037.com| www.887830.com-七星彩历史中奖号码| www.g53.cc-新浪竞彩足球比分| www.009411.com-优信彩票注册| www.4200.vip-七彩股份-| www.18195.com-致富彩票app下载| www.69393.com-福彩三d守号| www.676946.com-福彩3d小鱼图迷| www.791036.com-手机号选彩票| www.881123.com-大乐透彩票幸运选号| www.408669.com-福彩体彩春节放假| www.533432.com-彩票玩法-| www.729095.com-达人彩票app| www.44639.com-购彩代赚领佣金团队| www.630330.com-彩店二维码图片| www.771163.com-51彩票下载安装| www.903139.com-香港高频快三娱乐| 手机购彩www.5109.cc| www.2xk.cc-快三总共多少组号码| www.031192.com-网上彩票是真的吗| www.133272.com-七星彩10期开奖| www.613826.com-调整高频快开彩票| www.702752.com-竞彩2串1返奖率| www.777815.com-快三开始赢后面输| www.846179.com-崔永元说彩票的节目| www.909670.com-乐彩网什么时候建立| www.975062.com-七星彩长条规律图| www.jp.com-038彩票骗局| www.295835.com-安徽快三讲解| www.444898.com-风铃艾彩原创合集| www.578392.com-开彩票店店面要求| www.670262.com-什么彩票是5位数| www.796825.com-青蛙彩票app下载| www.913666.com-快三提现延迟吗| www.984436.com-彩八彩票怎么害人| www.lr83.com-怎么看中彩网正规吗| www.908168.com-七星彩少花钱中大奖| www.559447.com-福彩3地图迷总会| www.665937.com-七乐彩开奖各等奖金| www.sy75.com-彩票要买几位数| www.963491.com-周五竞彩足球对阵表| www.51bi.com-1分彩什么玩法| www.393345.com-二次元眼睛画法彩铅| www.571246.com-中國体彩网电脑版| www.062379.com-彩乐园2下载安装| www.330763.com-大发快三如何猜下期| www.073969.com-彩库苹果下载| www.28te.com-怎么短信买彩票| www.5682.cm-七分快三开奖| www.21099.cc-江西时时彩走势| www.74495.com-七乐彩二等奖三等奖| www.028006.com-全国彩礼排行| www.gj34.com-彩票和值技巧大全| www.066801.com-湖北快三和尾| www.016220.com-中国体育彩票365| www.135837.com-竞彩网比分直播新浪| www.67392.com-体彩11选5复式| www.te56.com-凤凰时时彩开奖记录| www.12cr.com-国彩是什么意思| www.771029.com-彩虹七号游戏多少钱| www.8234.cm-奔腾彩票是正规的吗| www.033515.com-王者彩票218| www.270744.com-好彩四味爆珠| www.508508.com-彩民开机号-| www.680597.com-体彩中了5亿| www.796827.com-足彩倍投攻略| www.308499.com-内蒙竞彩快三查询| www.15xh.com-彩仙网开奖资料结果| www.8952.biz-盛兴彩票欢迎使用| www.646881.com-彩民打彩票犯法吗| www.612909.com-福利彩票双色球窍门| www.727959.com-山东福利彩票手机版| www.831181.com-四月足彩赛程| www.929225.com-彩票有没有弄虚作假| www.29fy.com-大乐透时时彩| www.293161.com-彩票跟龙-| www.171898.com-甘肃快三预测今天| www.06ru.com-彩搜网真实的谎言| www.358213.com-易经破解七星彩| www.783402.com-七乐彩幸运选号| www.953214.com-福彩快-| 500彩票www.607356.com| www.158429.com-体育彩票店北单| www.269108.com-网络彩票恢复了么| www.452173.com-彩票线路检测中心| www.579242.com-青蛙彩票一首页| www.252082.com-在中彩网能买彩票吗| www.117827.com-一分时时彩大小技巧| www.325308.com-苹果彩票线路导航| www.474968.com-海口快三开奖结果| www.526941.com-体育彩票开桨结果| www.505230.com-体彩和福利彩区别| www.92514.com-上海快3彩经网| www.135249.com-国内知名的体育彩票| www.327143.com-鸿瑞彩票合买是托吗| www.41317.com-彩票挂机赚钱软件| www.81yg.com-竞彩足球不好买| www.5464.cc-彩虹代刷网源码下载| www.1031.net-福彩3d助手开奖号| www.136225.com-59彩票官方网| www.866476.com-体彩开奖结果昨天的| www.3581.com-稳定赠送彩金平台| www.78733.cc-足彩开奖及奖金| www.073800.com-彩有是什么意思| www.9570.org-美国彩票介绍| www.60320.com-好运快三怎么下载| www.62iy.com-五彩斑斓的世界虐吗| www.966890.com-吉林快三高手群| 盈彩www.890752.com| www.550353.com-优彩师免费版| www.68176.com-手机快三-| www.439896.com-中彩票巨奖的人是谁| www.tf01.com-k彩福地线路登录| www.06zf.com-下载彩票开奖公告| www.65iv.com-时时彩五星百位走势| www.267393.com-五百万足球彩票网| www.397205.com-体彩春节后开奖时间| www.rq65.com-2019彩票政策| www.200932.com-七星彩晚上开奖时间|