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.299902.com-福彩走势图制作| www.2145.com-c36官方彩票| www.ea83.com-广西48彩开奖结果| www.40ad.com-山东菏泽彩礼| www.331668.com-甘肃的快三开| www.507662.com-福彩69期开奖| www.828795.com-彩票离婚案例| www.qh74.com-好彩一网上开奖结果| www.85hq.com-飞彩app-| www.597637.com-广东市体育彩票中心| www.779512.com-福利彩票大乐透开奖| www.gd44.cc-彩票双色球下期预测| www.160259.com-原创福彩分析| www.c70.com-彩站专用电视走势图| www.964716.com-19052胜负彩| www.86236.com-福彩3d模拟摇奖噐| www.087077.com-四季彩票登录一| www.227510.com-篮球体彩网站| 大赢家彩票平台www.109716.com| www.647920.com-乐喜彩票登录| www.057863.com-河北快三号码大全| www.297255.com-购彩iv-| www.370061.com-冠彩网是啥-| www.946883.com-北京中彩快印连锁| www.qf83.com-安徽快三现在走势图| www.520795.com-小白星之卡比三重彩| www.87vu.com-彩虹鱼图片简笔画| 天天彩票www.160883.com| www.sa87.com-2019互联网售彩| www.193455.com-彩票遗漏k线的技巧| www.ri62.com-大发快三骰子模拟器| www.095679.com-福彩什么时候停售| www.453255.com-乐彩vip标准版| www.46en.com-秒速时时彩人为控制| www.84336.com-足彩竞猜必发指数| www.731982.com-足彩19030-| www.047618.com-e乐彩官方app| www.076023.com-安巙快三一定牛预测| www.av28.com-体彩快3开奖| www.501937.com-白菜网领彩金| www.582837.com-买彩票欠款十几万| www.627072.com-香港红财神彩图| www.476541.com-彩票网投可靠吗| www.cai85.com-河南快三走势图| www.1725.vip-彩票双色球网上投注| www.52ly.cc-足彩量化模型下载| www.594138.com-彩票分析选号软件| www.692151.com-永久彩票平台| www.778906.com-安彩现状-| www.4890.net-佬牛足彩专家预测| www.368162.com-刚力彩芽的唇| www.515522.com-七星彩中的人好少| www.647908.com-赌时时彩输惨的故事| www.740368.com-荣彩彩票-| www.868388.com-七星彩值-| www.r24.org-快三更改开奖时间| www.388031.com-华彩什么意思| www.530081.com-七彩大公鸡-| www.631587.com-云彩面包-| www.736009.com-七星彩位数开奖规则| www.127133.com-彩铅画风景难| www.8983.top-马来西亚分分彩官网| www.58597.cc-宝马彩票投注方法| www.169021.com-快三彩票实战技巧| www.266155.com-广西快乐双彩开奖详| www.323153.com-湖北省福彩app| www.402280.com-彩票摇奖机编程| www.507077.com-澳客网彩票触屏| www.578623.com-彩票店装照片| www.123541.com-正规合法的彩票平台| www.189189.com-江苏福彩快三开奖号| www.253551.com-彩之家app-| www.919536.com-彩票程序-| www.8mj.cc-有靠彩票为生的人吗| www.592028.com-体彩七位数玩法介绍| www.699910.com-五分时时彩开奖公告| www.iz4.com-内蒙快三助手下载| www.107922.com-3d福彩谜语图| www.538347.com-y8彩票-| www.662228.com-彩票拉人方法大全| www.777937.com-全球彩票软件app| www.877669.com-中国有多少彩迷| www.0292.com-体彩招工-| www.696066.com-竞彩网诈骗-| www.781211.com-儿童彩虹画图片| www.863642.com-166彩票双色球| www.q92.cc-河北快三遗漏值统计| www.098991.com-福利彩票旗下传统彩| www.590628.com-福彩3d高级走势图| www.187833.com-七星彩奖表-| www.199041.com-快三福彩是真的吗| www.093610.com-手机高频彩票网| www.tq57.com-福利彩票店申请流程| www.807626.com-1997彩票详情| www.758895.com-微彩点播厅-| www.755595.com-苹果彩膜图片| www.956070.com-足彩竞猜最新结果| www.vj61.com-彩票中奖后多久过期| www.33709.com-非凡彩票网官方网站| 乐点彩票www.239828.com| www.9995.com-全国彩票开奖360| www.96223.cc-辽宁体彩排列三预测| www.957548.com-彩乐透-| www.cp872.com-易彩快三有什么规律| www.577914.com-微投彩票图片| www.664387.com-禁止网上售彩| www.734704.com-新浪爱彩彩票大厅| www.65pn.com-卖体彩刮刮乐的利润| www.9278.net-乐彩客是正规的么| www.878360.com-九号彩票平台欺诈| www.975253.com-时时彩杀跨度和值| www.hp2.cc-网彩平台-| www.731041.com-竞彩足球盈亏指数| www.801825.com-大奔驰彩票官网| www.638166.com-色彩搭配图-| www.725353.com-体彩票11选5结果| www.796084.com-彩尊国际提现不了| www.499967.com-平台计划师带你玩彩| www.039349.com-万鑫彩票-| www.0rx.com-七乐彩是假的吗| www.2036.cn-青岛市体彩彩票中心| www.9673.me-时时彩走势图彩經网| www.053474.com-足彩网上购买| www.675503.com-彩票站连连看| www.755229.com-购人人彩违法吗| www.811501.com-彩享开奖结果查询| www.871613.com-金利彩票骗局| www.965021.com-境外彩票网站改网址| 500彩票www.638477.com| www.t24.site-彩票在线兑奖| www.41108.com-中彩网五分时时彩| www.972251.com-大众彩票是真的吗| www.cai6455.com马来西亚和乐彩| www.121085.com-在网上能买彩票吗| www.257955.com-爱彩票破解-| www.829000.com-新乐彩登陆-| www.894983.com-体彩官网购彩软件| www.956116.com-金帝网络彩票| 彩票8www.cp8003.cc| www.979290.com-五彩缤纷香烟多少钱| www.60350.com-最把握的黑彩平台| www.020728.com-真福彩早早报| www.113230.com-苹果版下载彩票| www.351811.com-315彩票-| www.448839.com-浙江省彩票开奖号码| www.3604.xyz-足球彩票价钱多少钱| www.622698.com-双色球福彩预测| www.784446.com-什么叫网彩-| www.854567.com-众彩网赵公明3d| www.918171.com-私彩投注改单| www.973791.com-唐山快三开奖结果| www.bp84.com-竞彩篮球nba| www.567412.com-中彩网广东-| www.075287.com-五福彩票网5f12| www.325108.com-在外国买彩票中奖| www.562087.com-开心七星彩图版区| www.63881.cc-广西快三有没有假| www.37182.com-好运彩彩票网下载| www.435415.com-快三49期-| www.740900.com-3d彩票论坛网址| www.431161.com-快速时时彩娱乐| www.19063.com-送彩娱乐金网址| www.531911.com-奔驰彩票官网下载| www.976557.com-运城结婚风俗彩礼|