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天

知道了
彩01彩票 www.93pj.cc-分分彩如何看号| www.24bf.com-福彩987那年出| www.077160.com-青海快三网站| www.799968.com-杀号定胆360彩票| www.199221.com-江苏快三二同号推荐| www.437118.com-福利彩票租赁平台| www.548982.com-128彩网-| www.620505.com-香港中彩公司| www.701136.com-足彩比分预测最准| www.774103.com-电脑数字彩票的规律| www.635634.com-下载35彩票-| www.875454.com-快彩电子走势图| www.bn5.cc-快三过五啥意思| www.38cz.com-福利彩票机器摇奖| www.24kl.com-彩宝邀请码怎么获得| www.4100.xyz-彩虹七号游戏视频| www.325570.com-福彩3d彩易网| www.737186.com-彩票智能机选| www.152643.com-8199cc彩票网| www.626097.com-深圳市鑫彩晨| www.773000.com-网上彩票群计划| www.4jr.com-中国彩票东北最大奖| www.029756.com-安微福彩快3下载| www.022211.com-重庆彩五星定位胆| www.096128.com-双色球中彩网一擂台| www.nz18.com-菜鸟驿站彩票机| www.863554.com-彩票采集器修复教程| www.952334.com-k彩平台登-| www.cp617.com-幸运快三就是个坑爹| www.91317.cc-好彩双爆焦油| www.074323.com-用手机怎么买彩票| www.057985.com-3d彩票规律-| www.573221.com-吹吹七星彩-| www.235245.com-中国福彩网下载| www.480016.com-竞彩和北单区别| www.579624.com-彩票开挂作弊器免费| www.663934.com-福利彩票投注站电话| www.766425.com-竞彩足球怎么买不了| www.73il.com-神马彩票app| www.8488.cn-北京彩票店的电话| www.0722.xyz-万博体彩靠谱吗| www.105408.com-奔驰彩票计划网| www.222509.com-淘彩是正规网站吗| www.261537.com-吴忠快三开奖结果| www.744313.com-168手机彩票苹果| www.877093.com-利彩app安卓下载| www.vt66.com-山东体彩扑克牌开奖| www.202.cc-三毛彩吧平台| www.d73.org-吉林快三预测助手| www.021.in-微信彩神vll| www.6684.cn-彩票可能有赢家吗| www.60712.com-贵州人中彩票大奖| www.111177.com-数字彩票大乐透| www.870198.com-喝彩是什么意思| www.964716.com-19052胜负彩| www.026564.com-足球博彩在哪买| 彩票大家乐www.21202l.com| www.088776.com-金福彩票可靠吗| 500彩票www.50026a.com| www.980994.com-旺彩预测大乐透彩票| www.090913.com-百盛彩票-| www.7647.pw-香港6hck彩库| www.ds37.com-3彩票app-| www.118954.com-97彩票下载-| www.352823.com-彩票中奖还负债| www.511658.com-手机彩库宝典下载| www.lk95.com-亚洲彩票第一平台| www.342866.com-足彩win310-| www.885146.com-2019彩票新平台| www.950704.com-我要下载乐彩网| 爱彩www.013ac.com| www.716006.com-搜索3d家彩网| www.584902.com-彩人网-| www.444833.com-彩票游戏是什么意思| www.716303.com-彩铅画鲲-| www.361377.com-九亿彩票是骗局吗| www.547536.com-28彩吧-| www.288.shop-七星彩三字现的概率| www.ap5.com-河北福彩3d玩法| www.07rm.com-刚力彩芽和武井咲| www.242.tv-时时彩五星选号| www.038873.com-信彩团队计划| www.41711.com-买足彩软件-| www.874699.com-约彩368-| www.108617.com-今七星彩开什么码| www.44ds.com-足彩十四任选九预测| www.751642.com-可以提现的彩票网站| www.632319.com-快三012路分析法| www.759757.com-新宝平台时时彩| www.872469.com-五省快三基本走势图| www.969579.com-酷彩官网-| www.pz02.com-278彩票-| www.44471.cc-河北快三对子推荐| www.663945.com-购买nba的彩票| www.758383.com-彩票01是正规的吗| www.ei19.com-一分快三算号神器| www.053164.com-开群买彩票-| www.773462.com-鸿运彩票软件| www.913210.com-彩经网3d选胆图| 福彩www.26878h.com| www.025544.com-彩票幸运飞艇聊天室| www.400121.com-重庆时时彩开奖调整| www.002143.com-程远彩票专栏| www.157222.com-竞彩单场为什么关闭| www.16pn.com-3d乐彩网中奖号码| www.4488.date-蚶江镇彩票站电话| www.016680.com-福彩pk10怎么玩| www.100564.com-乐彩网lccp下载| www.180806.com-购彩大厅app| www.712463.com-爱米彩票真挣钱吗| www.7521.pw-台湾彩票官网| www.43742.com-三d彩吧图库| www.55695.com-七乐彩几个号能中奖| www.008347.com-点击更多精彩内容色| www.121051.com-福彩历史开奖开| www.272655.com-广西7乐彩-| www.351623.com-身边真有中彩票的人| www.7363.xyz-网上能买3的彩票吗| www.322275.com-137彩票下载安装| www.387588.com-户外全彩屏幕| www.668107.com-福彩三地字谜开后门| www.7069.cc-555彩票网合法吗| www.528798.com-凤彩网今日彩票指南| www.181073.com-今日中彩骗局| www.83ue.com-信彩计划网-| www.965869.com-彩票店励志名言| www.12yt.com-800彩票app-| www.919.biz-微信带你买彩票的人| www.562681.com-天气网彩吧图| www.es69.com-彩神3-| www.984753.com-彩运8网址-| www.601545.com-彩客网怎样玩| www.720808.com-新2彩是不是黑网址| www.800544.com-卓易彩票是哪个网站| www.872190.com-贵州省彩票兑奖中心| www.926426.com-吉祥彩手机登陆入口| www.987326.com-福彩大乐透-| www.cz40.com-彩神团队是真的吗| www.25sq.com-福利彩票背面图片| www.247955.com-体彩和福彩哪个更假| www.412221.com-埃及五分彩-| www.517625.com-九龙彩票真假| www.576759.com-0567好彩官网| www.94mh.com-深圳开彩传媒靠谱吗| www.235665.com-专业玩彩-| www.427213.com-邢台临城彩票中奖| www.6872.loan-东方彩票注册送33| www.15py.com-陪嫁要比彩礼多吗| www.671869.com-彩宝彩票网页| www.95125.com-福彩票购买-| www.427448.com-体体彩排列5彩i| www.506992.com-福利彩票赛马怎么玩| www.578146.com-彩票一宝贝预倾| www.662960.com-3g彩票下载-| www.715567.com-新彩网福彩3d| www.790359.com-杏彩官网登录| www.346475.com-手机特彩吧报码开奖| www.360846.com-开彩传媒电话号码| www.33296.com-贵阳竞彩快三查询| www.562600.com-福彩3d组三全买| www.08ha.com-体彩开奖19043| 500彩票www.500285.com| www.370368.com-彩票网直播间| www.662412.com-全民彩票3d-|