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.480201.com-彩云网盘-| www.97053.com-福彩3d黑彩网站| www.82dl.com-大乐透预测牛彩网| www.840620.com-中国福利彩票中奖号| www.960983.com-快三微信坐庄机器人| www.cp1086.com-快三计划网址| www.025040.com-快速开奖彩票| www.160279.com-广东快中彩中奖规则| www.372908.com-体彩排五奖号| www.93fv.com-微彩吧怎么下载伴奏| www.9300.biz-乐彩网有毒吗| www.sr64.com-七乐彩专家预测总汇| www.26ia.com-今晚福利彩票图纸| www.el74.com-快三平台吧-| www.wm55.com-体彩排列三试机| www.24ru.com-福彩手机怎么购买| www.57991.cc-福彩传真-| www.52581.cc-买彩票就这几招微盘| www.018070.com-七星彩双期走势图| www.041481.com-彩票最长的龙有多长| www.561071.com-网彩平台注册就送钱| 博乐彩票www.35918j.com| www.976.date-买彩票守号会中奖吗| www.968314.com-时时彩导师的骗局| www.ol12.com-福彩双色球蓝球推荐| www.200766.com-吉林新快三-| www.574874.com-乐购彩怎么玩| 500彩票网www.843633.com| www.228056.com-江苏快三能不能玩| www.338937.com-数字彩购彩下载| www.450386.com-彩票电几点开门| www.654063.com-乐彩写真机-| www.am42.com-天律快三开奖| www.x76.cc-体育彩票大乐透奖金| www.879791.com-十大网彩平台| www.974101.com-亿博彩票1分彩计划| www.cx16.com-吉林快三预测与推荐| www.yl54.cc-中国体育彩票查询| www.50792.com-乐盈彩票可信吗| www.003391.com-5分钟快三结果| www.092586.com-福建体彩app下载| www.356955.com-开心双彩店-| www.700912.com-足彩通app下载| www.807023.com-玛雅吧彩票登录| www.902797.com-手机体彩客户端下载| www.980928.com-彩788反水时间| www.87dw.com-名爵娱乐时时彩| www.78sl.com-时时彩技巧个人经验| www.22ph.com-3d电脑福利彩票| www.0193.cn-m8彩票-| www.151459.com-爱彩通app下载| www.288024.com-立彩屠龙团队| www.293627.com-今日开奖快三河北| www.545844.com-买彩票在哪里买| www.626712.com-彩16可靠吗-| www.821314.com-七星彩第三位走势图| www.503218.com-鸿彩灯光灯库下载| www.726163.com-彩宝贝网双色球预测| www.934308.com-智博彩票代理| www.i65.mobi-彩票精彩论坛网址| www.992.live-8位数的彩票是什么| www.9956.loan-体彩开奖彩票开奖| www.021552.com-有游彩票吧-| www.198409.com-传统彩票网站| www.879139.com-福彩3g百度吧| www.973337.com-彩虹岛接单平台| www.cai7894.com快三顺口溜逢4下| www.127710.com-彩虹代刷对接卡易信| www.ei48.com-高频彩票就是诈骗| www.92891.com-赢赢彩票网-| www.126961.com-福彩6十1开奖公告| www.374515.com-山东体彩官方电话| www.962030.com-3d字迷多彩网| www.87eg.com-小白彩票下载安装| www.092124.com-乐发彩注册-| www.181129.com-旺彩-| www.1221.pw-湖北快三盘口| www.7569.shop-中国最大的彩票公司| www.40749.com-彩票1号平台| www.87642.com-彩票怎么砍龙稳赚| www.268276.com-彩民彩票官网| www.7814.me-足彩竞彩窍门| www.93ou.com-易彩堂总公司这那里| www.682928.com-中彩在线公司在哪里| www.834999.com-联盟过年炫彩| www.113530.com-四川有福彩快三吗| www.198920.com-彩票快三怎么玩法| www.289116.com-彩神111-| www.403655.cc-彩票众彩网-| www.tj88.cc-亚洲5分彩-| www.34jd.com-广东腾彩印刷| www.815.org-怎么制作彩虹玫瑰| www.047877.com-福彩排列3走势图| www.357186.com-彩票公司员工做什么| www.456023.com-红菜苔彩票是真的吗| www.554443.com-竞彩广告词-| www.857841.com-盈彩网怎样选号| www.130204.com-时时彩下期杀号技巧| www.226769.com-快捷彩票-| www.324155.com-聚鑫乐彩怎么样| www.660040.com-256彩票安卓| www.783283.com-苏州福彩销量| www.860256.com-500彩票官方网| www.971296.com-彩票刮刮奖真坑| www.918201.com-高价收购中奖彩票| www.325507.com-七星彩局王-| www.347654.com-天天彩票集团软件| www.95us.com-足竞彩比分直播| www.634356.com-彩八彩票官方网站| www.856252.com-彩票开发极云| www.933448.com-传奇彩票是真的假的| 博友彩www.808399.com| www.203316.com-安徽快三手机版下载| www.638139.com-色彩画静物-| www.736881.com-体育彩票机选好还是| www.812035.com-乐彩1750o-| www.884811.com-中国彩票地方开奖| www.954976.com-福建福彩七乐彩开奖| www.lv74.com-好彩票app2-| www.910125.com-高频彩联盟网站| www.207803.com-时时彩过滤工具手机| www.79723.com-宁夏彩票中奖人| www.881340.com-高频彩数字概率| www.982290.com-好彩2复式计算公式| www.d18.cc-彩票开奖七星彩开奖| www.028643.com-福彩三天计划胆论坛| www.608833.com-最早七星彩-| www.735661.com-福彩3d赔钱概率| www.849288.com-彩票足缘小说| www.912771.com-欢乐彩下载-| www.983429.com-贵州彩票17中奖| www.dm41.com-5分快三计划| www.ym82.com-北单彩票app下载| www.791463.com-华阳彩票真实性| www.9177.org-彩虹股份最新消息| www.224967.com-投资福彩快三违法吗| www.377958.com-襄阳彩礼钱20万| www.948813.com-五分彩是什么彩票| www.987237.com-福利彩票站点查询| www.cp5177.com-贵州快三开奖一定牛| www.9459.cc-彩神pk10计划| www.1233.tv-高频彩被叫停| www.529168.com-小六壬测彩票号码| www.8496.vip-色彩性格测试| www.763163.com-大乐彩走势图| www.vc66.com-福彩微投资-| www.293324.com-快三押大小单双技巧| www.699262.com-重庆时实彩怎么注册| www.555444.com-甘肃快三顺子| www.627519.com-双色球彩民村走势图| www.594644.com-诚信彩票app| www.664181.com-福彩七彩乐中奖奖金| www.730448.com-时时彩走势图开奖及| www.803455.com-刚力彩芽为什么被黑| www.871565.com-好用彩票app下载| www.919536.com-彩票程序-| www.967979.com-时时彩怎么举报| 天天彩票www.7782c.com| www.553972.com-篮球彩票那里买| www.610027.com-淘宝怎么买体育彩票| www.666266.cc-彩虹无人机的股票| www.830519.com-印象彩票网官方| www.925111.cc-淘宝怎么购买彩票| www.297828.com-合肥快三跨度表|