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.893025.com-大师彩票-| www.22126.com-256是黑彩票吗| www.65nl.com-彩麒麟怎么越养越红| www.810608.com-吉祥彩票网登录| www.930322.com-彩票助赢在线计划| www.990803.com-彩票33辅助软件| www.bs33.com-上海快三下载| www.r93.online-江苏快三走线结果| www.72hk.com-足彩竞猜301| www.319770.com-在51中彩中奖| www.195915.com-江西快三走势图表i| www.905027.com-快三一分彩-| 好彩头彩票www.90305c.com| www.255350.com-大发快三500彩票| www.958776.com-0714彩票-| www.hn41.com-北京昨天快三走势图| www.7ic.cc-河北沧州双彩店转让| www.030353.com-8k彩票邀请码谁有| www.585907.com-彩票注册送钱合集| www.676543.cc-彩票榜软件是真的吗| www.1313.pw-新三国精彩打斗视频| www.100238.com-百宝彩视官网注册| www.218544.com-快三招商合作加盟| www.nw61.com-福彩快三赌博| www.062652.com-99鸿运购彩票| www.8837.xyz-谁有福利彩票邀请码| www.777337.cc-彩票工作工资高吗| www.735971.com-彩吧试机号开机号| www.f92.com-老彩民下载-| www.085768.com-够力七星彩画规下载| www.469996.com-外國人領彩票| www.786131.com-h123彩票-| www.870117.com-体彩大乐透能中吗| www.934140.com-彩妹排雷双色球今天| www.994806.com-好彩堂一句一肖| www.qh29.com-福彩26选5开奖| www.563853.com-松岗东方亮彩在哪里| www.880954.com-彩票开奖时间双色球| www.969486.com-欢乐彩app官网| www.cp465.com-合肥快三-| www.44fh.cc-彩票的尺寸-| www.357726.com-体彩14场对阵表| www.zy40.com-大公鸡七里彩下载| www.107767.com-彩票可以作弊吗| www.740933.com-梦彩票数字| www.827565.com-竞彩足球结果| www.891053.com-彩票用语双飞| www.954451.com-日本彩票-| 快彩在线www.cpkk.com| www.688970.com-下载福彩双色球开奖| www.835827.com-中彩那天课文的答案| www.929062.com-彩票条码-| www.982618.com-共享彩票机招商| www.zw2.com-河南快三彩票平台| www.126845.com-福彩三滴开奖号码| www.697871.com-全民中彩票是真是假| www.804020.com-福彩字谜画谜大全| www.879583.com-网络彩票能小赚钱吗| www.947790.com-中国彩吧2019| www.991178.com-可乐彩票官网| www.sl5.com-体彩论坛-| www.pc76.com-人人中彩票中奖截图| www.813087.com-线上体彩怎么赚收益| www.73647.com-易彩人工计划软件| www.030223.com-福彩刮刮乐中30万| www.116969.com-福彩3d教父可信吗| www.vy29.com-贵州快三推荐号码| www.25879.cc-彩神助手-| www.017876.com-最新网易彩票下载| www.121753.com-中港彩票网-| www.250256.com-爱彩票app-| www.459841.com-福彩猫腻-| www.282320.com-重庆时时彩奖表| www.369031.com-星辉彩票注册| www.497685.com-777彩票论坛| www.7308.cm-福彩包括哪些彩种| www.0749.xyz-万彩影像大师破解| www.770038.com-七彩山鸡多少钱一斤| www.td66.com-网彩是什么-| www.46rs.com-机打彩票设备| www.219616.com-广西快三组合| www.283153.com-体彩七星彩开奖规则| www.388231.com-荒漠迷彩图片| www.90903.com-8亿彩票苹果版| www.159988.com-福彩炔乐十分走势图| www.4662.com-卖多少钱彩票| www.343216.com-伦敦两分彩开奖| www.419870.com-印象彩票下载安装| www.246393.com-新浪足球彩票结果| www.1975.live-一线彩库-| www.889830.com-nba篮彩在哪里买| www.cp785.com-用什么软件玩快三| www.367852.com-彩芽はる愛?緊縛| www.567456.com-彩虹五号无人机售价| www.720850.com-新2亦彩票论坛| www.675511.com-中国体彩开结果| www.031361.com-辉煌彩票的骗局| www.ju7.com-福彩快三河南走势图| www.819178.com-彩票加注和加倍| www.608552.com-7号彩票网-| www.669526.com-彩票大数定律例题| www.wl66.com-体彩票开奖查询公告| www.70369.com-下载一品彩票| www.476071.com-外围和国彩的区别| www.xg83.cc-好彩36第4943| www.797100.com-大众彩票跟单| www.2277.hk-天才与彩票-| www.060048.com-爱彩乐专业数据网站| www.362400.cc-描写彩虹的优美语段| www.8401.cc-乐福彩票下载安装| www.69783.com-高频彩套利是骗局吗| www.57286.cc-彩票开奖是多少天| www.966.xyz-梦秘解图七星彩梦册| www.905939.com-嬴彩天下720| www.982243.com-一期彩票人工计划| www.bf1.cc-北京福彩快三开奖数| www.5986.cn-熊猫彩票官方| www.28365.cc-南方彩票网专业预测| www.71149.com-体彩开奖号码公告| www.173367.com-网上快三平台正规吗| www.a92.club-创意水彩-| www.079702.com-彩票助赢在线计划| www.78mx.com-体育竞彩胜平负开| www.453788.com-万家彩票18553| www.67872.cc-棋牌彩票推广中心| www.82496.com-体彩500走势图| www.db7.com-湖北快三跨走势图| 彩票500万www.695037.com| www.996110.com-福彩吧、北京pk拾| www.b47.top-彩中堂-| www.0251.xyz-中彩票破产-| www.17079.com-足彩兑奖期限| www.021887.com-微彩彩票靠谱吗| www.210043.com-彩神v可不可靠| www.14rx.com-七星彩局王长条图纸| www.309238.com-网络彩票托网恋| www.648568.cc-977彩票平台会员| www.088313.cc-网络足彩单场在哪买| www.el13.com-正规的网络购彩平台| www.bh40.com-英国五分彩合法吗| www.495.gg-微信没有福利彩票| www.20398.com-快三求回血-| www.0411.com-易彩彩民登录福地| www.32jy.com-3d走势彩吧助手| www.12579.com-爱乐透彩票历史版本| www.ab39.com-上海快三二码遗漏| www.cp916.com-最新广西快三走势图| www.596433.com-彩计划9cb高手| www.974614.com-7星彩下期预测| www.1254.xyz-快三豹子号奖金多少| www.35883.cc-爱彩乐十一选五推荐| www.89731.com-胜负彩新浪爱彩| www.134819.com-缅甸好彩是假烟吗| www.237647.com-老盘足彩任九| www.323535.com-新加坡彩票投注站| www.401872.com-好彩客app正规吗| www.9185.biz-福彩3d手机彩票| www.555882.com-华北传奇快三| www.385639.com-福彩588app-| www.438317.com-彩票代理利润| www.ok58.cc-江苏快三怎么看大小| www.34pg.com-七星彩有人中过吗| www.626376.com-鑫彩美缝剂多少价位| www.689287.com-齐鲁风采彩票开奖|