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.44556.com-体彩8串28-| www.80ym.cc-冮苏体彩11选5| www.275605.com-五分时时彩走势图| www.38gm.com-e乐彩手机端| www.271824.com-立彩助手ios| www.394991.com-网上买篮球彩票软件| www.560694.com-时时彩手机做号软件| www.678232.com-彩票申请书-| www.121572.com-福彩陕西福利彩票网| www.545593.com-怎么推广彩票| www.gk0.com-时时彩中奖规则表| www.870432.com-易旺彩票邀请码| www.415009.com-竞彩让球投注绝招| www.92998.cc-体彩字谜牛材网| 多乐彩票www.244646.com| www.216830.com-省份快三风险| www.502675.com-多彩投爆雷-| www.765382.com-彩票代理刷反水| www.13.cc-中福时时彩开奖号码| www.113722.com-360竞彩网-| www.7664.wang-福彩广告图片| www.42968.com-北京体彩11选五| www.516112.com-m5彩票登录-| www.309035.com-彩民等待开奖| www.143813.com-乐8彩彩票怎么样| www.2379.vip-七彩山鸡苗批发| www.50799.cc-哪个彩票平台有反水| www.cj5.com-三分快三怎么玩稳赚| www.cc91.com-体彩5d开奖查询| 金冠彩票www.49956x.com| www.442422.com-体育彩票打票员招聘| www.595689.com-福利彩票专家推荐号| www.687769.com-福建福彩票开奖结果| www.776242.com-火箭彩票安卓app| www.6880.pw-环彩国际官网平台| www.314785.com-7天彩票app下载| www.136422.com-彩77安卓-| www.0077.cm-福彩派奖宣传| www.406128.com-七星彩近千期走势图| www.874322.com-808七星彩奖表| www.811753.com-新家坡天天彩资讯网| www.885463.com-2118彩票软件| www.972951.com-好运来彩票诈骗| www.mb62.com-好运彩快三下载| www.04447.cc-微信提现彩票教学| www.62873.cc-彩经网排三胆码预测| www.45089.com-福彩怎么提成| www.622755.com-在玩彩票输死了| www.726525.com-香港彩宝典app| www.806870.com-香港赛马会投网彩票| www.877666.cc-境外彩票诈骗| www.944009.com-轩彩娱乐app| www.998690.com-彩票部电话-| www.cl49.com-彩报第一版今天| www.88205.cc-小站宝彩票官网| www.590910.com-福彩308那年出的| www.931784.com-世界杯彩票投注网站| www.129346.com-体彩昨晚开奖号| www.768365.com-快三娱乐-| www.856840.com-○k彩票-| www.940989.com-网络彩票代理返佣| 中彩网www.71233hh.com| www.fq11.com-快购彩票3平台官网| www.078905.com-百宝彩-湖北快3| www.158715.com-博友彩票登录官网| www.889530.com-七乐彩票不给提现| www.976988.com-河南骗彩礼-| www.cl82.com-淘彩票大发快3秘籍| www.b75.vip-福彩跑马幸运彩图片| www.51le.com-七彩双色球开奖| www.701.name-助赢计划时时彩网站| www.838363.com-快三辅助器软件| www.912741.com-彩客网骗局-| www.974122.com-中圆福彩出什么弓| www.cp507.cc-一分快三平台网址| www.id84.com-手机买彩票中一等奖| www.59bz.com-彩票店有任务要求吗| www.691186.com-手机如何买足球彩票| www.783581.com-非法彩票平台| www.861852.com-幸运彩票手机版下载| www.945552.com-比特儿下限彩币交易| 500彩票www.26299q.com| www.906153.com-彩票租售平台| www.977974.com-彩钢瓦围挡效果图| www.cp8328.com-福彩图谜-| www.677008.com-万彩办公大师| www.286696.com-福彩快3走势图武汉| www.359777.com-七星彩会员用户登录| www.470558.com-博彩和足球的关系| www.567753.com-卖彩票的广告词语| www.636763.com-带彩虹的儿歌| www.700018.cc-竞彩跟单能赚钱吗| www.004727.com-鲛人鲨福彩3d预测| 冠赢彩票www.035989.com| www.3nc.com-彩八彩票属于官网吗| www.88yx.com-梦见7个数字买彩票| www.14ke.com-时时彩开奖更改| www.8gw.com-福利彩票040期| www.0877.me-彩发彩票-| www.6532.cn-免费的彩票销售平台| www.33148.com-福彩3d图谜字谜| www.878217.com-3d牛彩网图谜总汇| www.144106.com-福利彩8苹果手机版| www.284070.com-彩票店昵称-| www.393983.com-色彩对比构成| www.568188.com-顶尖彩票不能提现| www.718975.com-雨后出现彩虹为什么| www.884745.com-亿彩是正规平台吗| www.990824.com-乐彩彩票安卓版| www.ty97.com-彩票里面所谓的长龙| www.83kn.com-jc金彩网app| www.713681.com-王者彩票怎么玩| www.413643.com-豫彩通下载手机版| www.520453.com-北京快三限号是什么| www.582291.com-爱资料福彩大门户| www.648005.com-网投彩票排行榜| www.700344.com-足彩老牛解盘| www.768807.com-内部万元报彩吧图库| www.840011.com-官方快三购彩平台| www.909379.com-打内蒙古快三派彩网| www.986510.com-竞彩篮球比分赛果| www.ku3.com-湖北快三直选中奖| www.8114.org-红牛快三软件| www.507112.com-三彩彩票-| 500彩票www.342677.com| www.hr50.com-西宁快三走势图| www.f24.net-聚鑫乐彩怎么样| www.9210.in-亏损反拥的彩票平台| www.38669.cc-彩易科思和那个购彩| www.574737.com-北京福彩对奖方法| www.40355.com-关小刀足彩解盘| www.85029.com-3d彩圣字谜汇总| www.172578.com-11选5快三-| www.900202.com-快三单双技巧顺口溜| www.949224.com-3d之家彩票论坛| www.dh55.com-中国福利彩快3开奖| www.18fo.com-七乐彩33期开奖| www.88911.com-福彩快3和值表| www.506286.com-体育彩票一周开几次| www.4096.me-清乾隆釉彩大瓶| www.19eh.com-卖私彩被骗-| www.0066.tv-全球彩票手机平台网| www.791893.com-网上买时时彩犯法吗| www.902345.com-重庆时时彩5分| www.990240.com-湖北快三能玩吗| www.26ni.com-新万彩票吧开奖| www.121476.com-500彩票网的套路| www.188092.com-时时彩改时间| www.268371.com-河南省福彩网| www.844112.com-体彩专管员压力| www.oc46.com-体育彩票泳坛夺金| www.117786.com-大乐透彩票计算器| www.68170.com-大乐透走势新浪爱彩| www.077084.com-世界杯买体彩的多吗| www.166892.com-幸运快三稳中计划| www.98745.cc-福利彩票站点培训| www.19625.com-上海福彩网开奖结果| www.527911.com-时时彩360遗漏| www.sy36.cc-七乐彩3+1有奖吗| www.092601.com-郑州彩礼一般给多少| www.576471.com-汉中福彩二等奖| www.214321.com-人人彩彩票-| www.330801.com-买彩票钱输了难受| www.467246.com-彩票对家庭害处|