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天

知道了
9彩注册 www.869479.com-手机买七星彩| www.99018.com-彩票机选器工具| www.127090.com-彩铅画图片人物| www.967569.com-体彩大乐透选号| www.cg0.com-好彩一生肖走势图| www.356241.com-腾讯分分彩挂机方案| www.906556.com-浙六江福彩快三网| 亿彩堂www.87668g.com| www.440552.com-失信人可以买彩票吗| www.576449.com-爱乐彩网页-| www.663459.com-排列五走势彩宝网| www.756848.com-彩色混凝土路面施工| www.582720.com-58福彩聊天室| www.686448.com-500彩票网app| www.774417.com-简单水彩画图片| www.864562.com-彩客网旧版本| www.933531.com-快三平台犯法么| www.990406.com-彩票软件大红鹰下载| www.fn36.com-3d福彩试机号| www.858749.com-体彩组六六码遗漏| www.1416.pw-河北福彩3的| www.060896.com-去哪里举报网络快三| www.214300.com-人人买彩票-| www.407145.com-最新快开彩票| www.521242.com-vip时时彩合法吗| www.194679.com-快三彩票有规律吗| www.287976.com-博友彩-| www.604438.com-大乐彩中奖-| www.942342.com-e球彩技巧出号| www.gr03.com-美国好彩香烟价格| www.008128.com-今晚七乐彩开奖查询| www.380422.com-什么彩票天天开奖| www.661229.com-74岁老头中彩票| www.773030.com-天际彩票登录| www.915778.com-体彩退押金需要多久| 福彩www.15355p.com| www.469019.com-彩票五行对应数字| www.601044.com-新版微信怎么买福彩| www.27600.com-彩票自动跟投软件| www.117536.com-搜狐彩票万能七码| www.41778.com-3d高频彩是什么| www.776890.com-福利彩票有没有补贴| www.886786.com-大大彩票可靠吗| www.965683.com-彩神争霸2邀请码| www.he7.com-安徽快三入门| www.oh04.com-福彩开奖查-| www.767870.com-旺彩全国开奖大全| www.898819.com-宁夏福彩app| www.968214.com-阜阳福彩中心图片| www.46ry.com-易玩娱乐彩票平台| www.952218.com-加拿大3分彩开奖图| www.4731.xyz-中彩票后挥霍| www.1284.me-云南福彩大乐透开奖| www.nw28.com-福彩快三线上平台| www.44sc.com-新版二四六好彩网| www.231033.com-官方快三辅助器| www.619206.com-491彩票下载| www.008229.com-购彩计划软件下载| www.340041.com-竞彩高手哥微信| www.428337.com-18105足彩-| www.540664.com-舟全乐图彩网| www.683365.com-天天快三彩票网51| www.21622.com-49号码彩票走势图| www.063213.com-湖北快三查-| www.168432.com-北京快三开奖直播| www.29ni.com-彩铅画明星图片| www.290345.com-3d字谜双彩论坛| www.88416.cc-英国彩票大奖获得者| www.92080.com-顺丰彩票app| www.539564.com-彩票cc-| www.129248.com-搜索快乐彩浙江| www.236897.com-体育彩票6?1| www.345176.com-体彩数据表-| www.847322.com-七加一彩票-| www.59ph.com-彩票站兼营小吃| www.229044.com-好彩门天下彩| www.811201.com-六爻测彩票五行规律| www.907658.com-郑州彩票诈骗| www.971539.com-福彩端购彩大厅| www.cp6697.com-宁夏新快三开奖结果| www.355681.com-足彩奖金多少要交税| www.484023.com-新彩华章干嘛的| www.587589.com-合肥体彩竞彩店| www.654542.com-彩友吧彩民的家| www.719311.com-广东福利彩票| www.280352.com-新时时彩基本走势图| www.168937.com-体育彩票快3| www.391679.com-美狮彩票官网| www.567836.com-中国全部彩种| www.675368.com-宏盛彩票官网地址| www.771756.com-澳洲时时彩平台| www.865891.com-网易彩票不更新开奖| www.961621.com-手机买彩票下载| www.br.cc-安徽安徽快三| www.068422.com-彩票软件定制多少钱| www.777590.com-英国5分彩开奖历史| www.399973.com-纽约彩票的种类| www.271763.com-丰彩彩票网-| www.779176.com-王者手游彩票| www.77968.cc-作者中彩票书太监了| www.46799.com-大牛时时彩计划网| www.205173.com-内蒙古彩票快3开奖| www.862533.com-七乐彩中奖表| www.666138.cc-航天彩虹是国企吗| www.750598.com-中彩在线提现提不出| www.819857.com-中彩票不捐款| www.894349.com-福利彩票快乐12| www.962051.com-手机体彩安全吗| 福彩www.15355z.com| www.36oy.com-足球彩哪个网站靠谱| www.4913.cc-福建体彩票官网| www.238350.com-大发快三是真的吗| www.314566.cc-⊙江西快三和值表| www.233025.com-买足球彩票app| www.129591.com-众彩排三预测| www.3281.vip-网上彩票输了几十万| www.927871.com-美国彩票大奖| www.680670.com-彩中彩怎样才中奖| www.097871.com-福彩的试机号| www.zl38.com-彩票5000万-| 5号彩www.585hc.com| www.504202.com-十选一是什么彩票| www.353671.com-快乐购彩票-| www.506023.com-盛彩彩票多久了| www.33637.cc-新浪爱彩彩票大厅| www.510360.com-儿童歌曲彩虹的约定| www.628593.com-广东好彩36机选号| www.709632.com-福彩短信投注收费吗| www.370367.com-彩票走势图手机版| www.622905.com-039彩票-| www.720268.com-飞马彩票团队群| www.846813.com-彩票事件视频| www.985150.com-微彩是什么-| www.b83.xyz-上饶体彩中心电话| www.212711.com-手机彩票排名| www.896746.com-16亿美元彩票| www.144717.com-天际彩票安卓版| www.43qd.com-彩票财神算号| www.309866.com-中国体彩微信小程序| www.393108.com-水彩画天空教程| www.597286.com-中国福利彩票大乐投| www.hi31.com-买湖北快三的软件| www.44203.cc-彩吧p3试机号| www.035960.com-彩票人生句子| www.574107.cc-中信积分的彩票入口| www.680632.com-彩票怎么打出来| www.fr98.com-福彩快三胆码技巧| www.124655.com-分分彩最新漏洞| www.4569.wang-顶尖的彩票软件源码| www.4548.cc-凤凰彩票f83代理| www.752895.com-如意网彩网-| www.811299.com-体育彩票的玩法规则| www.873489.com-网易购彩合法吗| www.924825.com-穷人买彩票中奖| www.978581.com-极速快三彩票系统| www.am20.cc-快三所有号码表图片| www.re01.com-彩经网十大专家杀号| www.x94.cc-体育彩票开奖r结果| www.48zg.com-幸运十分彩是哪里的| www.4631.top-彩票纯属运气| www.1021.vip-壹玖玖彩票-| www.383171.com-彩票开奖查询16号| www.93336.com-杭州福彩3d走势图| www.64562.com-湖北快三长龙20连|