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天

知道了
亚洲28 www.219287.com-618快三彩票| www.470501.com-南方双彩票网走势图| www.062297.com-苏州于是足球e球彩| www.169292.com-彩票一分快三网站| www.551231.com-千禧彩票网官| www.994053.com-福彩三地图迷总汇九| www.x53.club-时时彩平刷不翻倍| www.365295.cc-北京体彩11-| www.33648.cc-新浪爱彩票网首页| www.52ly.com-永利彩票网址| www.587.cc-时时彩真没办法赢| www.996603.cc-黑龙江体育彩票官网| www.036234.com-彩票走势大全安卓| www.y25.cn-3d彩漫时间停止| www.844.cm-投彩网-| www.0093.cc-数字型彩票的原理| www.0756.online超信彩票-| www.8421.vip-m8彩票网-| www.4188.cm-七彩网络查分| www.821368.com-福彩3b牛材网总会| www.755336.com-彩牛彩票安卓版| www.874440.com-福彩快3012路| www.968537.com-体彩排例三开机号| www.ep3.cc-快三复式买四码| www.40570.com-什么叫亚洲彩| www.53989.com-中国体彩图片| www.004107.com-体育彩票大乐查询| www.631214.com-博彩软件对刷| www.097821.com-福彩机转让信息| www.809638.com-官方彩合法吗| www.900053.cc-51彩票登录-| www.977576.com-彩票介绍-| www.gf.com-唯彩足球竞彩| www.pj96.cc-北京市快三开奖查询| www.48hm.com-福彩3d标志-| www.360849.com-富贵彩下载官方网站| www.0448.cc-49陪彩票网-| www.7166.loan-七彩假期画报| www.38208.com-彩票免费预测大师| www.6600.biz-今日彩票运-| www.415888.com-竞彩足球单场倍投| www.619421.com-彩票破了能兑奖吗| www.71182.cc-福利彩票基诺游戏| www.634285.com-特区论坛七星彩| www.509259.com-金万城彩票平台| www.112461.com-体彩排列三字谜总汇| www.773776.com-时时彩平刷稳赚方案| www.189092.com-内蒙古快三直播现场| www.065101.com-十分彩网是不是诈骗| www.593062.com-彩虹三型无人机| www.336826.com-沈阳福彩中心地图| www.185625.com-福彩在线是骗局吗| www.884002.com-u9彩票会拉黑人| www.79198.cc-手机钢化彩膜怎么贴| www.29822.com-728彩票-| www.966443.com-燕赵福彩网快三| www.04ik.com-兰花简笔画彩色简单| www.628.in-彩票直通车图片| www.266493.com-河北快三选号技巧| www.7010.com-3d彩票平台注册| www.67048.com-安阳福彩中心地址| www.074308.com-彩富天下网-| www.384862.com-哪个彩票立送彩金| www.499814.com-新加坡快三开| www.08139.com-8号彩票下载| www.66187.cc-羊城晚报晚晚彩| www.029141.com-彩票止盈止损方法| www.984750.com-彩运8app网址| www.uz6.cc-马来三分彩官方开奖| www.oo60.com-3d新彩吧预测汇总| www.m90.online-彩879平台下载| www.45xg.com-中博彩票系统平台| www.8651.wang-代买彩票中奖没给钱| www.39803.com-彩影手机版免费下载| www.797105.com-凤凰2彩票-| www.787449.com-聚彩论坛网址是什么| www.214425.com-四亿彩票注册送41| www.25267.cc-彩铅入门画什么东西| www.al31.com-查询彩票开奖查询| www.513495.com-三彩家管理-| www.577018.com-今晚七星彩走势图| www.733901.com-福利彩票容易中奖号| www.874820.com-7k官方彩票下载| www.oz66.com-宁夏体彩领奖地址| www.78mj.com-重庆时时彩私庄风险| www.3859.bid-七星彩基本走势图综| www.777312.com-百度乐彩排三走势图| www.607895.com-韩国快三多少期| www.752930.com-重庆彩票网手机报| www.848381.com-足彩竞彩结果| www.307720.com-甘肃体育彩票官网| www.45hs.com-彩票站整体出兑| www.233845.com-福彩体彩基本走势图| www.316133.com-体彩申请流程| www.092174.com-345彩票软件| www.909.tv-高中生破解彩票| www.8911.net-手机牛彩-| www.536111.cc-买彩票几个数字| www.66163.com-福彩3d如何选好| www.108629.com-彩票赢还是输| www.cp9258.com-中彩彩票软件下载| www.249198.com-购彩是啥-| www.333455.com-彩票怎么提成| www.68280.com-快三手机-| www.7984.vip-博彩业到底有多强大| www.90nt.com-体彩缩水软件手机版| www.4112.me-模拟购彩软件| www.ep4.com-吉林快三有玩的吗| www.0311.pw-彩票机过户-| www.61av.com-福彩娱乐app| www.102293.com-彩03彩票-| www.173214.com-大发快三登录平台| www.291693.com-开乐彩规则-| www.369452.com-双彩票色球开奖结果| www.479209.com-竞彩5千万大奖| www.567470.com-彩虹六号围攻视频| www.650313.com-交友平台博彩骗局| www.731161.com-彩票3d魔图表| www.807175.com-好彩一开奖历史记录| www.880279.com-15期喜彩开奖| www.72gs.com-体彩容错表解释| www.ma14.com-一分时时彩计划| www.625321.com-顺盈彩票客服电话| www.716186.com-瑞典1分彩太害人了| www.828285.com-彩票是假的-| www.915086.com-中围体彩网-| www.90.cx-彩票快乐十分音乐| www.4286.biz-怎么做k彩代理| www.200181.com-智慧网福彩走势图| www.287080.com-彩票开奖软件大全| www.353638.com-移动梦网彩票直播版| www.7555.in-凤凰彩票传销| www.878841.com-体彩中了-| www.149863.com-甘肃快三怎么变了| www.294.biz-尤师彩票-| www.3502.org-江西快三走-| www.308122.com-七星彩专家预测码| www.3817.xyz-大乐透彩票中奖概率| www.169448.com-福彩快三qq群骗局| www.502915.com-玩私彩赢钱被黑| www.579034.com-甘肃福彩兑奖地址| www.832581.com-体彩和值遗漏值表| www.897606.com-竞彩足球全部赛程| www.972887.com-彩虹代刷app官方| www.cp9299.com-今天福彩快3走势图| www.212191.com-一分快三漏洞| www.765404.com-七星彩老头子解诗网| www.cp178.cc-甘肃快三开奖号码是| www.20cz.com-江苏体彩19049| www.007255.com-七乐彩红球定胆| www.76201.com-温州市福利彩票中心| www.243822.com-体育彩票大乐透网站| www.146767.com-k彩手机登录密码| www.278292.com-福利彩票三d| www.051399.com-下载万豪彩票| www.283697.com-彩票有二位数字的吗| www.1986.love-金百博彩民乐园登录| www.212689.com-88彩票骗局-| www.266452.com-即开彩app-| www.047264.com-彩票免费计划软件| www.8611.in-福彩电子走势图软件| www.43763.com-三d彩色打印| www.94680.com-噢客彩票com| www.1139.org-吉林快三分析大小|