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天

知道了
彩票123现在叫什么名字 www.408383.com-项城彩礼一般多少钱| www.z18.org-云彩厅是不是骗局| www.365410.cc-快三如何止损| www.327559.com-湖北快三开奖结果| www.480057.com-时时彩专家乐彩网| www.584400.com-91彩神兼职-| www.669898.com-凤凰彩票在线app| www.819357.com-河南彩票兑奖地点| www.654984.com-够力辣椒七星彩| www.803839.com-彩票网拖-| www.905792.com-众网彩票是骗局吗| www.981912.com-七星彩开结果奖预测| www.ag03.com-19049期胜负彩| www.us75.com-彩投美女骗局| www.37rm.com-快三和值机率| www.6351.wang-深圳天天悦彩正规吗| www.22293.cc-时时彩必赢投注法| www.884588.com-旧彩吧网-| www.609252.com-七星彩19年43开| www.4876.biz-彩票模拟摇奖软件| www.397353.com-掌上彩票可信吗| www.369585.com-万豪最近体彩销售点| www.29005.cc-福彩3第开奖| www.451842.com-10年老彩票网| www.559644.com-云彩宝官网-| www.659471.com-大乐透中奖彩票展示| www.750031.com-福彩3d解码解密| www.828356.com-谁中了彩票一等奖| www.913059.com-好彩客真的能赚钱吗| www.203456.com-福彩5d怎么选| www.239251.com-分分彩输了十万| www.0778.xyz-491彩票下载安装| www.9ia.com-体彩七位数中六位| www.706799.com-龙虎和时时彩预测器| www.34254.com-花草彩铅画简单| www.gl78.com-网上福彩快三合法吗| www.rj08.com-彩运8五分快三计划| www.586970.com-六亿彩下载-| www.693926.com-68福彩-| www.865296.com-彩友-| www.cw40.com-900彩票靠谱吗| www.181377.com-彩票app哪个好| www.464098.com-竞彩足球和北京单场| www.805649.com-彩铅荷叶上色| www.w41.org-彩票3d表-| www.098544.com-彩票有什么软件| www.13188.cc-彩票大乐透试机号| www.603893.com-3a彩票app-| www.799302.com-鼎盛彩票注册| www.975563.com-彩票项目黑马| www.is21.com-乐乐彩是什么| www.61bz.com-澳门赌彩网站| www.13216.cc-常州福利彩票店转让| www.84580.com-彩钢板门价格| www.030623.com-帮买彩票是什么骗局| www.185680.com-福彩规划是什么东西| www.503952.com-福彩验票吗-| www.596099.com-中彩票后怎么领奖| www.oo0.com-江苏快三推荐什么号| www.54131.com-最新私彩漏洞| www.hs98.com-北单足彩在哪里下下| www.8228.pw-彩票反水1%-| www.259078.com-关小刀今天足彩推荐| www.375203.com-福彩3d路数遗漏| www.592062.com-大中华彩票网靠谱吗| www.711626.com-特彩吧高手网报码| www.984292.com-查北京快三开奖号码| www.259106.com-竞彩官网下载| www.436608.com-彩票营收-| www.205100.com-体彩一等奖兑奖流程| www.qo81.com-易彩快三是不是骗局| www.88464.cc-彩票9官网-| www.11904.com-体彩p3图谜手机网| www.078013.com-中福时时彩怎么提现| www.427735.com-足彩任九场缩水公式| www.608023.com-荷兰彩票开奖号码| www.730203.com-互娱彩票app| www.875996.com-e球彩任二最划算| www.972113.com-大众彩票网安全吗| www.009774.com-优信彩票登陆| www.385212.com-中奖的彩票足彩图片| www.604167.com-5258竞彩网-| www.666865.com-港彩95期资料论坛| www.733499.cc-全民彩票开奖结果| www.795098.com-中国福彩十二选五| www.871088.com-彩票手机万能倍投器| www.939468.com-彩吧彩票是真的吗| www.983222.com-棒棒彩票是赌博吗| www.cp0993.com-快三分析软件| www.172962.com-甘肃快三开奖号码是| www.723509.com-福建彩票大奖| www.803165.com-足球彩票怎样看中奖| www.875566.com-福彩开奖调整| www.981306.com-五分彩算胆公式| www.cp3855.com-福利彩8合法吗| www.5423.cn-彩钢瓦安装方法视频| www.715707.com-两元彩票一般几位数| www.809350.com-彩票中奖率最高| www.064005.com-菠萝彩软件下载| www.177579.com-快三奖金是多少| www.506979.com-中国竟彩网首| www.235214.com-北京快三专家预测网| www.966.cn-7星彩连中2个号| www.696581.com-香港时时彩官网网址| www.630571.com-四季彩中秋| www.9xs.com-老司机彩票-| www.876900.com-买体彩大乐透方法| www.424284.com-星彩无惨是什么| www.869376.com-七星彩中几个有奖| www.941282.com-彩票网站回单套利| www.989451.com-乐彩网是不是真的| www.qk5.com-体彩排三选号技巧| www.212589.com-时时彩平台开户送钱| www.761043.com-秒速时时彩单期计划| www.118543.com-博彩租卡-| www.334813.com-福彩3d彩500| www.408297.com-七星彩福星-| www.512552.com-彩铅动物简单图片| www.581589.com-彩八仙时时彩ios| www.657264.com-中国福利彩票消消乐| www.730301.com-软件买的彩票靠谱吗| www.835576.com-体彩大乐透手机软件| www.903229.com-正规足彩app| 彩客博www.8667z.com| www.8868.tv-下载500彩票| www.900347.com-五行与数字推算彩票| www.431456.com-足彩凯利值怎么算| www.912058.com-非法经营网络私彩| 818合彩www.www.9889hc.com| www.890069.com-nba体育彩票| www.968968.com-彩神网投钱-| www.13ea.com-快三有没有顺序| www.216848.com-大大快三平台| www.610566.com-108彩票平台| www.683128.com-大胜彩票app| www.cai6933.com甘肃快三带线走势图| www.456159.com-玩彩票心态-| www.0856.xyz-八号时时彩手机软件| www.647364.com-彩坛至尊免费料大全| www.731468.com-胜负彩19042期| www.810641.com-泰安体彩中心地址| www.8349.loan-两分钟一开的彩票| www.3266.xyz-老婆玩彩票输了2万| www.11945.com-微彩是合法的吗| www.5971.biz-永久彩票下载| www.96282.com-八千亿贪彩票| www.000769.com-时时彩两期必中后一| www.41cf.com-七星彩福星-| www.3827.org-足彩竞彩比分计算器| www.86248.com-福彩3d直选3| www.636058.com-彩虹六标准版多少钱| www.33167.cc-一分彩全天计划| www.713607.com-王者彩票苹果手机| www.800606.com-云冈区福利彩票站| www.866358.com-搜狐分钟彩票官网| www.414228.com-什么是博彩-| www.190440.com-甘肃省彩票11选5| www.255965.com-赢彩票与你同行旧版| www.25779.com-山东体彩客户端| www.63362.cc-大公鸡七星彩解梦| www.364160.com-网购彩票2018| www.489261.com-足彩大小球买球技巧| www.y19.com-大发彩平台-| www.cj5.cc-白岩松说彩票|