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.551525.com-快乐彩中奖概率| www.686959.com-体彩管网-| www.228272.cc-伊川县彩礼价目表| www.104076.com-马来西亚大万彩票| www.211095.com-贵州快3彩经网| www.061055.com-彩客网咋样-| www.658623.com-红星说彩群英会| www.789142.com-中国足球彩票竞猜| www.870039.com-福彩3d中奖计算器| www.970711.com-关于彩票句子| www.e87.top-今晚七乐彩现场直播| www.45rq.com-附近福利彩票位置| www.827368.com-我买彩票输了四万| www.ax94.com-彩迷下载-| www.736481.com-快三团队-| www.31325.cc-新彩吧字谜画迷总汇| www.316381.com-彩166-| www.436225.com-中国移动彩票| www.551794.com-彩票台子送彩金| www.633280.com-最新竞彩258球迷| www.813794.com-中国体育彩票微信号| www.903203.com-绿和彩-| 全民彩票www.qm26.com| www.787668.com-江苏体彩500| www.890496.cc-快三猜大小-| www.961578.com-牛蛙彩票全年资料| www.be14.com-大发快三的规律| www.798501.com-鼎盛冠军五分彩| www.886453.com-彩票走势图大赢家| www.958110.com-帝皇彩票app官网| 天天彩票www.54968h.com| www.ln42.com-旺旺彩票app| www.568312.com-福彩三d断组| 亿龍彩票www.1368k.cc| www.178581.com-福彩手机投注客户端| www.285122.com-开体彩店做什么活动| www.893658.com-彩票号码组合器| www.984242.com-糖果彩球-| www.9347.vip-球彩vicki-| www.614910.com-中央2台买彩票| www.3460.vip-财富彩票-| www.316675.com-新浪爱彩手机版| www.420116.com-谁有恒大彩票的网站| www.555951.com-彩票试玩游戏平台| www.8183.vip-乐讯圆梦七星彩早版| www.534722.com-七星彩中奖怎么扣税| www.39hx.com-嘉兴福彩双色中心| www.334801.com-福彩3d咋玩-| www.457155.com-铜陵市体彩中心地址| www.560603.com-博金彩票官方网站| www.294539.com-黑龙江福彩官网下载| www.689228.com-专业玩彩网-| www.808267.com-赢彩彩票不能买| www.923817.com-彩70平台-| 福彩网www.60007r.com| www.169724.com-快三选号助手下载| www.879466.com-多乐彩玩法-| www.967975.com-中国彩票中心案| 大赢家彩票平台www.958351.com| www.655395.com-6188彩票包赔车| www.9991.date-哪里有福彩3d的书| www.43030.com-福彩3d北斗推荐| www.05re.com-马可彩铅水溶和油性| www.65lu.com-香港凤凰彩报字谜| www.304638.com-买足球彩票的app| www.435489.com-云南体育彩票透| www.635711.com-广西福彩选号器快十| www.805403.com-七色彩开奖结果规则| www.899247.com-福彩3d藏机图解密| www.tz60.com-彩票123网址导航| www.24va.com-派彩跟反水-| www.039062.com-京东快彩钱取不出来| www.172857.com-福彩5d开奖走势图| www.cp211.com-江苏快三开奖统计| www.4085.xyz-幸福彩票是真的吗| www.9177.com-东方一分彩开奖网| www.365854.cc-七乐彩开奖顺序号| www.11br.com-彩钢瓦漏水怎么办| www.579125.com-福彩3d购买计算| www.717918.com-彩客比分网-| www.809991.com-彩票的随机规律| www.890891.com-快三走势图tv| www.951248.com-高反水彩票平台网站| 好乐多www.hld33.com| www.kj04.cc-乐彩3d论坛资料| www.s89.space-新彩网字谜汇总| www.51xc.com-彩鹰喷绘机官方网站| www.450.pw-福利彩票单式如何玩| www.3554.xyz-首存送彩金2018| www.153365.cc-深圳体彩几位数| www.231811.com-51中彩app下载| www.642921.com-香港新出彩票网站| www.445060.com-下彩彩-| www.270910.com-体育彩票二维码| www.rw64.com-快三选胆码技巧| www.39cp.com-排列三走势图中彩| www.2662.cc-福彩网3d-| www.73kq.com-京彩官方下载| www.1042.live-爱乐彩浙江十二选五| www.5832.xyz-九号彩票官方网站| www.21744.com-彩票套现怎么算| www.79931.cc-中彩网奖池-| www.9879.wang-世彩票-| www.69191.com-178彩票网正规吗| www.018127.com-时时彩人工计划定胆| www.0gi.com-吉彩网买彩票可信吗| www.35956.com-中华福彩开机号| www.322767.com-全民福彩下载安装| www.21zl.com-9d彩票网站-| www.1080.mobi-揭秘职业竞彩高手| www.8736.xyz-重庆时时采彩乐彩图| www.nl4.com-湖北快三图表| www.uk03.com-彩宝彩票app下载| www.15167.com-描写彩虹的词语| www.74341.com-彩票了3d怎么选号| www.060678.com-幸运彩彩票网站| www.973505.com-彩虹宝宝兔叨叨| www.zj63.com-河北福彩好运2| www.69nm.com-网上怎么打彩票| www.7826.org-彩民打彩票犯法吗| www.68689.cc-至尊彩平台下载| www.025855.com-彩票中奖没人领| www.639503.com-500彩票终端机| www.779152.com-韩国都有什么彩票| www.839489.com-胜负彩走势图| www.887001.com-金凤凰彩票合法吗| www.956885.com-k·h百彩网-| www.999963.com-江苏快三安卓版| www.ah96.com-手机体彩投注| www.ri37.com-极速快三微信群| www.12kg.com-天天爱彩票ios版| www.82en.com-彩票极速赛车计划| www.2156.top-彩经网众乐快三| www.920083.com-彩票gg网页-| 名门彩www.33997f.com| www.785097.com-乐迎彩票怎么样| www.848464.com-七星彩专家测| www.890789.com-体彩魔方-| www.947436.com-福彩3d购买技巧| www.983933.com-518彩网是真的吗| www.rk71.com-北京快三路线电话| www.19hu.com-泰安市体彩中心电话| www.340.net-快三跨度表速查表| www.3486.vip-福彩没人买了| www.567988.cc-七彩野山鸡养殖技术| www.15207.com-漫画彩虹是什么意思| www.56244.com-时时彩回本心态| www.91024.com-晚晚好彩关注| www.066158.com-900彩票是真的吗| www.694896.com-快三开奖记录360| www.567194.com-南京福利彩票店转让| www.620219.com-竞彩技巧亚盘分析法| www.02870.com-彩票二等奖在哪里领| www.019056.com-中国福利彩票时时彩| www.24748.com-樱花树彩铅画法| www.781042.com-福彩天下无敌2| www.848292.com-福彩有几等奖| www.901520.com-牛彩论谈首页官网| www.200477.com-熊猫网彩票-| www.ql77.com-立彩网页-| www.885017.com-亿彩堂app-| www.180167.com-易彩快三软件| www.290813.com-合肥福彩中心| www.5174.vip-有韩国快三吗|