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.339946.com-竞彩收米gif图片| www.333410.com-分分彩彩票计划软件| www.no53.com-大乐透走图彩吧助手| www.92491.com-湖北省福彩网| www.98043.cc-35彩票下载安装| www.755892.com-竞彩娱乐-| www.vm25.com-牛彩网三d字谜| www.72aq.com-梦见买彩票没有中奖| www.4800.vip-吉林快三的玩法| www.198823.com-卖体彩-| www.cp3598.com-开彩票店的禁忌| www.539790.com-手机软件彩票靠谱吗| www.310610.com-彩久彩票是不是骗局| www.530825.com-彩铅零基础画| www.63821.cc-传统足球胜负彩| www.418522.com-专业购彩中博| www.537275.com-彩色的含义-| www.629485.com-赢钱彩是官网吗| www.833172.com-三国梦想惨星彩漫画| www.951241.com-信誉彩票平台有哪些| 68彩票www.68689k.com| www.283963.com-福利彩票几位数子| www.22567.com-7星彩开奖直播现场| www.209559.com-如何买彩票新手入门| www.518711.com-旺财彩票大师| www.638226.com-体彩竞彩与电影区别| www.786821.com-彩票中奖指南霍华德| www.245832.com-8k彩票骗局全过程| www.888074.com-丰盈彩票首页| www.cp5157.com-上海快三规律| www.zq57.com-3d彩报-| www.cp5278.com-爱彩乐甘肃快三| www.282002.com-台湾时时彩的骗局| www.7119.win-七彩孔雀蓝建盏| www.0648.biz-皇朝彩票可信任嘛| www.w99.org-买彩票输好多钱想死| www.1155.biz-体彩宣传口号| www.06ji.com-福彩3d33期-| www.367611.com-三彩家是什么公司| 全民汇彩票www.52303y.com| www.947223.com-三彩彩票官方| www.796028.com-优盈彩票5分快3| www.01114.com-澳客竞彩必发指数| www.d88.hk-数字彩票的神奇组合| www.158157.com-彩通彩票-| www.350863.com-手机后彩膜-| www.628610.com-921彩票-| www.9370.loan-彩票案王素英| www.33871.com-彩吧试机号查询| www.811218.com-福彩开奖app| www.030233.com-好运来彩票是骗局吗| www.022624.com-安徽福彩快三爱乐彩| www.171024.com-内蒙快三走势图表| www.555440.com-数学算法买彩票| www.09814.com-今年七乐彩开奖结果| www.42552.com-网易足彩推荐预测| www.679853.com-巨龙彩票平台怎么样| www.559609.com-彩购平台app下载| www.814786.com-体彩3d全部号码| www.855870.com-彩票中奖指南读后感| www.924117.com-豹赢彩票官方网站| www.981964.com-最近彩票新闻| www.rp9.com-彩票幸运号码| www.cp1330.com-江苏五分快三计划| www.tn28.com-网上彩票怎么拉代理| www.073144.com-丹麦快乐彩在线计划| www.382687.com-福彩3d遗漏数据| www.506287.com-吉林快三历史走势| www.571390.com-华人彩官方网站| www.713689.com-福彩彩吧图库第三版| www.hb50.com-福利彩8app| www.70io.com-腾龙时时彩做号新版| www.6170.org-彩钢板房顶防水| www.219548.com-广西快三开奖诂果| www.291124.com-乐彩双色球分析论坛| www.894805.com-双色球彩票中奖情况| www.985739.com-时时彩外挂稳赢技巧| www.df01.com-福利彩票是6位数吗| www.3690.cm-新浪中国竞彩网| www.9069.org-七乐彩比较器| www.43427.com-彩票3d开奖直播| www.1907.vip-彩票机器人计划| www.37656.cc-网络彩票怎么做庄家| www.345044.com-福彩销售网点查询| www.54374.com-下载新浪彩票网| www.004883.com-大乐透彩票中奖号码| www.095291.com-彩票投注怎么玩| www.28155.cc-中彩网三地字谜| www.013608.com-七星彩和值尾走势| www.104001.com-彩神争8的网址| www.175127.com-手机快三投注网站| www.267522.com-彩票怎么看规律| www.357228.com-彩票加倍打法| www.790115.com-炫彩玫瑰-| www.858807.com-开奖彩票网址| 中国福利彩票www.08588k.com| www.666988.com-下载福彩3d藏机诗| www.780917.com-海南七星彩直播现场| www.673750.com-中国古建筑彩绘图集| www.742833.com-金山彩票官网| www.800974.com-224大众彩票网| www.864434.com-178彩票网登录| www.991938.com-福利彩号码怎么选| www.uq.com-彩票网址大全| www.mv41.com-快三网址计划| www.391735.com-黑彩快三押大小| www.687666.cc-139彩app下载| www.802693.com-彩c16ccm-| www.880561.com-大乐彩历史开奖号码| 百姓彩票www.www.bxcp3333.com| www.04ik.com-兰花简笔画彩色简单| www.20iw.com-19051足彩奖金| www.820685.com-彩钢板怎么安装视频| www.918038.com-3d彩吧开机号| www.qy10.com-求三分快三的书| www.606303.com-足彩世界杯冷门| www.733795.com-频彩改20分钟| www.848859.com-中国彩票真吗| www.956157.com-速盈彩平台-| www.bu5.com-好彩一生肖数字表| www.611350.com-快三每隔几分钟开奖| 福彩www.26878c.com| www.928430.com-福彩3d旺彩预测| 500彩票www.66621i.com| www.259.red-意彩平台怎么样| www.8308.cn-溢彩年华作品| www.570787.com-上海福彩网短信投注| www.493081.com-竞彩足球赢千万| www.83ik.com-腾讯十分彩app| www.3238.vip-彩588开奖-| www.699877.com-五分时时彩基本走势| www.784659.com-天天红单彩票官网| www.854683.com-北京时时乐彩| www.902486.com-黑彩规划倍投可信吗| www.960543.com-快三和值连号| 幸运彩票www.444070.com| www.59121.cc-买彩票坚持守号| www.095276.com-彩票平台论坛| www.677111.cc-掌上福彩宝典app| www.08mp.com-香港彩宝典图片| www.517658.com-全球彩票ios版| www.567072.com-卡通彩膜-| www.633017.com-彩609是不是骗局| www.703019.com-竞彩足球比分怎么玩| www.021887.com-微彩彩票靠谱吗| www.891372.com-彩票人生句子| 七乐彩票www.qlc3.com| www.25ed.com-华彩计划-| www.79vd.com-南京体育彩票网点| www.0887.pw-火星彩票合法吗| www.5726.cn-何谓福彩3d-| www.035318.com-彩票电视软件| www.6569.cc-小站宝彩票店加入| www.pq82.com-融彩网福彩快三| www.25qm.com-华彩联合支付宝团队| www.907198.com-彩票十二生肖叫啥| www.972054.com-微信上可以买彩票吗| www.vj67.com-双色球彩票规则介绍| www.08po.com-爱购彩票害人害己| www.83tr.com-最大黑彩案件| www.250378.com-中彩彩票快3| www.819977.com-腾讯分分彩平刷玩法| www.26288.com-彩吧免费下载| www.587050.com-昨晚彩票号-|