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.e91.cc-中国福彩网开奖时间| www.064242.com-3d彩票中奖规则| www.588131.com-七星彩一周开奖时间| www.694321.com-ig传统彩-| www.789596.com-快三试机号今天| www.by95.com-福利彩票几期查询| www.20uo.com-七星彩第19029| www.2233.hk-诺亚国际彩票| www.066132.com-统一彩票兼职| www.225349.com-计划群带着买彩票| www.339009.com-体彩大乐透追加| www.445624.com-彩票销售管理条例| www.955411.com-微微彩票能玩吗| www.gv8.com-电脑亚洲彩票| www.td08.com-彩色表示颜色吗| www.769122.com-好彩网钻石团队| www.936418.com-分分彩稳赢技巧| www.996652.com-福彩浙江12选5| www.cl06.com-北京快三走遗漏| www.yc55.cc-快湖北快三的走势图| www.77ta.com-足彩违法吗-| www.4580.biz-彩票怎么能中大奖| www.05084.cc-互联网彩票解禁提案| www.98611.cc-比特币3分彩| www.110700.com-七星彩开奖图册| www.179792.com-七星彩玩法介绍| www.268939.com-彩神邀请码哪里找| www.454806.com-主流博彩公司| www.560897.com-大乐透彩吧论坛| www.639935.com-东方竞彩app| www.817704.com-一彩票图谜总汇| www.886937.com-永乐彩票官网| www.986239.com-彩神500官方| www.c7.pw-湖北快三中奖| www.81564.com-河北快三是正规彩吗| www.079452.com-3d彩票咋玩-| www.155566.com-凤凰彩票投注技巧| www.268591.com-福彩3d和值尾走势| www.340845.com-体彩五字术语| www.448268.com-老谢看彩双色球| www.538691.com-江苏彩-| www.621782.com-大乐透走势彩之家| www.695003.com-竞彩篮球比分直播唯| www.773202.com-安徽福彩快三中奖表| www.pz62.cc-彩1怎么下-| www.18qq.cc-七乐彩哪个频道直播| www.1674.cn-青岛体彩管理中心| www.22647.com-网赌一分快三技巧| www.73881.cc-欢腾彩票官方网站| www.092186.cc-大连买彩票几点截止| www.199573.com-七星彩现场直播今晚| www.295448.com-彩吧图谜全图| www.380611.com-福彩3口走势图| www.514650.com-品牌彩妆专柜加盟| www.595518.com-福彩43期预测| www.680906.com-七星彩是真的吗| www.779138.com-6号彩票下载| www.954989.com-黑客找彩票漏洞| www.999696.cc-长沙彩票店-| www.wz4.cc-河南体彩网-| www.ub07.com-亚博体育平台是黑彩| www.37xs.com-金鱼彩铅画教程图片| www.4890.vip-新手如何玩足彩| www.06790.com-复式彩票如何算中奖| www.54574.com-彩吧助手app下载| www.004933.com-浙江体彩大乐透| www.065313.com-春天彩票合法吗| www.136888.com-福利彩票怎么样| www.203171.com-怎么样看彩票走势图| www.267883.com-大发快三宝典| www.348533.com-7f000盈彩网址| www.586162.com-福彩3d九宫格图| www.660871.com-中乐彩手机平台网| www.749679.com-正版资料彩牛网| www.812615.com-福彩3d书籍排行榜| www.881575.com-澳门博彩五星| www.952556.com-时彩推广-| 网易彩票www.084wy.com| www.ik58.com-购大乐透彩票| www.xw02.cc-凤凰彩票pk10| www.65qq.cc-湖北彩票兑奖中心| www.rv44.com-牛票票彩票官网| www.112045.com-彩票大奖排名| www.174433.com-快三首页-| www.235654.com-山东彩友沙龙论坛| www.301525.com-彩票大师有我必中| www.363917.com-福彩3d9资料| www.427448.com-体体彩排列5彩i| www.515476.com-七星彩中了500万| www.576766.com-彩吧论坛体彩试机号| www.636384.com-彩虹4无人机实战| www.771895.com-秒速时时彩骗局| www.828407.com-排列五百度乐彩| www.887949.com-赛马赛果及派彩| www.23177.com-福彩双彩论坛讨论区| www.66131.com-申请免费彩金58| www.1361.pw-49c永利彩票注册| www.827830.com-彩票跟单什么意思| www.kp4.com-体彩快三走势图| www.01jd.com-彩虹象什么-| www.1816.cm-三分彩官方下载| www.296655.com-中国彩票中奖查| www.49zs.com-菲女踩狗足彩| www.5661.cm-七乐彩走势网| www.18669.cc-福利彩票三等奖| www.72797.cc-3d彩界精英独胆| www.365270.cc-南京彩库女装| www.447556.com-福彩票三d试机号| www.534223.com-七星彩在哪里兑奖| www.65567.cc-体彩快三11选5| www.525605.com-时时彩68计划网| www.854671.com-下载彩视做视频相册| www.918074.com-1516彩票网| www.984010.com-彩票365怎么样| www.nk9.com-彩7-| www.89760.com-彩票店请员工| www.098122.com-国彩彩票是官网吗| www.185952.com-河南快三玩法介绍| www.262761.com-福彩快3兑奖规则| www.489862.com-时时彩代理加盟官网| www.568773.com-m8彩票一彩种| www.644291.com-足彩19029任九| www.771765.com-时时彩根据啥来开奖| www.907707.com-吉林快三和值攻略| www.964415.com-足彩最新开奖结果| 华彩www.71399w.com| www.223519.com-中国体彩官网| www.455709.com-买七星彩技巧与规律| www.560187.com-3d与体彩试机号| www.688148.com-福彩3d交流群| www.827242.com-姿彩彩票-| www.01of.com-鼎隆彩票网-| www.773000.com-网上彩票群计划| www.ck08.com-大发快三有哪些软件| www.xc87.com-排列三彩经网杀号| www.50js.com-凤凰彩票投注可靠吗| www.0580.cn-明代釉下五彩瓷| www.21375.cc-腾讯分分彩流水返点| www.69331.cc-竞彩专家推荐预测| www.04924.com-网购彩票020| www.78618.com-3d彩票吧-| www.056499.com-七星彩中奖领奖地点| www.878768.com-彩票的规律计算法| www.88663.com-彩聊苹果版下载安装| www.062365.com-159彩票正规吗| www.133937.com-好彩无嘴哪里买| www.215666.com-360彩票中心首页| www.288995.com-新加坡南洋彩网站| www.360464.com-优彩区-| www.444045.com-三维心脏彩超正常值| www.790516.com-丹东3d彩吧图库| www.893349.com-七乐彩360-| www.964334.com-十四场胜负彩新浪| 福利彩票www.99677z.com| www.dt47.com-彩之王app-| www.00188.cc-爱投彩票是真的吗| www.80944.com-河北福利彩票图片| www.030408.com-购彩app靠谱么| www.106749.com-星期五开什么彩票奖| www.177720.com-青海快三开奖| www.243044.com-福彩3d之家预测| www.314622.com-七彩冰球官网下载| www.383037.com-体彩2月16日开奖| www.486863.com-彩票网上怎么买彩票|