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天

知道了
1分快三 www.638231.com-色彩图片大全| www.723227.com-东彩娱乐下载| www.552298.com-彩票三b字谜| www.606822.com-属羊人买彩票的数字| www.701899.com-体彩福建-| www.819290.com-亳州天价彩礼事件| www.618439.com-19010期足彩| www.153661.com-彩客比分直播百度| www.307658.com-好彩店彩票-| www.764653.com-808网七星彩论坛| www.981084.com-七彩艺术节-| www.ym14.com-神圣彩票登录| www.607921.com-韩国彩票结果查询| www.365893.com-彩铅渐变色怎么涂| www.265793.com-虚拟足球e球彩规律| www.437122.com-新浪彩票网官方端口| www.036868.com-彩票软件哪个最可靠| www.762592.com-五分时时彩开奖计划| www.975403.com-七星彩长期包三字现| www.cp1499.com-广西福彩快3走势图| www.sc06.com-怎样玩大发快三| www.7lw.cc-立体彩铅画树图片| www.249683.com-天天彩票官方下载| www.338113.com-蚂蚁彩票靠得住吗| www.ib82.com-安徽福彩开奖结果| www.f81.top-掌上彩票下载| www.62wj.com-170彩票服务平台| www.1912.me-一个人领彩票| 博乐彩票www.188727.com| 大赢家彩票平台www.902261.com| www.ns3.com-河南福彩一定牛快三| www.za35.com-福利彩票刮刮乐技巧| www.o31.com-分分彩软件-| www.67xa.com-彩妆化妆品代加工厂| www.1916.org-彩票频道万彩吧| www.061915.com-彩客网怎么买不了| www.397001.com-福彩四码最大遗漏| www.531905.com-没有彩排过的戏| www.625.cm-老版时时彩app| www.131663.com-潍坊彩礼2018| www.240318.com-正版彩神官方网站| www.365502.cc-台湾即时开彩| www.486913.cc-让彩票站代打彩票| www.592980.com-体彩排3的算法| www.690917.com-宝赢彩票软件靠补吗| www.772376.com-时时彩咋样算| www.860234.com-时时中彩票官网下载| www.948984.com-中国福彩在线| www.999367.com-足彩胜平负都选多钱| www.jk47.com-送彩金的彩票| www.ad62.com-彩票123手机版本| www.zh10.com-七乐彩专家杀号| www.654935.com-体彩进球-| www.71wd.com-福彩快开新规| www.1818.com-爱米彩票下载| www.86896.cc-私人彩票福彩快三| www.nd81.com-保定体彩中心| www.08io.com-彩铅苹果画教程图解| www.026365.com-十大彩票信誉平台| www.351.pink-吉快三遗漏数据| www.se8.com-体彩上海11选五| www.zd81.com-福正德彩票-| www.39vy.com-全国彩礼最高的省份| www.801.me-歌词里最美的彩虹| www.8cx.cc-a8彩站是正规的吗| www.95ie.com-体育彩票选几位数| www.7920.com-白金彩票-| www.015394.com-巨丰彩票app| www.93737.com-立博博彩app| www.cd60.com-彩票报纸-| www.e10.club-马来西亚福彩3d| www.38jg.com-彩铅手绘卡通狗| www.567.cx-双色球杀号定胆彩乐| www.024344.com-福彩丹东彩吧全图| www.126699.com-春天美景彩铅画| www.093809.com-体彩乐选三票| www.0433.tv-福彩p62往期开奖| www.r18.shop-福彩3d购买平台| www.76qk.com-阿里彩票平台| www.948270.com-福彩多彩网-| www.q05.cn-中彩手彩票电脑版| www.038.cm-兼职彩票代玩| www.6336.top-下载一个天天中彩吧| www.368876.com-彩神幸运飞艇全能版| www.561199.com-金牛彩票是正当的吗| www.829597.com-江苏快三冷号速查表| www.229060.com-大发分分彩计划在线| www.219359.com-福建体彩领奖地址| www.318939.com-宜春体彩中心| www.431408.com-遵义彩票销售员招聘| www.395993.com-鲜花映彩虹合唱谱| www.520048.com-福彩12选5限号了| www.600056.cc-彩票中奖者的运气| www.667526.com-彩球滑梯作弊| www.735956.com-新浪彩票_首页| www.801524.com-598彩票登录| www.871325.com-买足球竞彩走势图| www.957232.com-南国彩票精彩论| 大赢家彩票平台www.186379.com| www.914447.com-瑞彩祥云视频| www.966256.com-极速快三怎么研究| www.cp483.cc-河北快三走势图昨天| www.8049.vip-水彩画作品简单| www.98850.com-微信上玩快三| www.392785.com-延吉体育彩票| www.0807.wang-大发快三倍投计划图| www.759356.com-地方彩开奖公告| www.894518.com-怎么查彩票中奖地区| www.959739.com-澳洲3分彩全天计划| 购彩在线www.66332n.com| www.006077.com-上海快三和值表| www.448658.com-时时彩五星百位走势| www.795001.com-上海体彩店转让信息| www.870234.com-三分钟时彩下载| www.98441.com-福建快三几点开始| www.085717.com-彩神打印机-| www.170997.com-吉林快三开奖结果图| www.332683.com-中福彩票快3技巧| www.674062.com-怎么做彩票推广| www.757809.com-菲律宾彩票平台| www.882756.com-彩票对冲套利靠谱吗| www.946667.com-体彩排列五摇奖现场| www.988039.com-福彩能追加吗| www.qc2.com-福彩快三开奖规律| www.uz85.com-体彩快中彩中奖规则| www.22hz.com-高频福彩pc-| www.1532.xyz-大家乐彩票-| www.6589.cn-彩16官网登入| www.12094.com-双色球福彩网易彩票| www.8613.cn-在线预测快三| www.403520.com-彩票开奖勇士争先| www.2879.net-彩票历史开奖顺序| www.22219.cc-双色球唯彩看球杀蓝| www.75819.com-香港赛马彩票平台| www.061369.com-中华彩票是否正规| www.44fu.com-足彩4串11-| www.1724.com-江苏体彩七位数选号| www.1181.tv-彩票广告宣传语图片| www.74es.com-彩宝app客户端| www.4880.com-c彩53net-| www.31529.cc-香港分分彩正规吗| www.009433.com-彩票12ios-| www.36161.cc-快乐十分彩票官方| www.527608.com-时时彩和值预测| www.845944.com-各地彩票案-| www.920492.com-彩神iapp-| www.973084.com-彩虹六号愚人节活动| www.50cl.com-浙江体彩6十丨| www.2134.biz-牛彩网图汇总九| www.8226.cn-网上365天天彩票| www.857026.com-基诺彩票的玩法| www.939864.com-彩神大发快三口诀| www.984096.com-75彩票网址-| www.22953.cc-王者彩票技巧| www.bq26.com-彩票网站哪个最正规| www.8092.biz-红牛娱乐快三| www.136342.com-广西体彩网上投注| www.229667.com-足彩-| www.591135.com-七星彩012路| www.678372.com-福彩3d大底号| www.732672.com-许昌灵井彩礼| www.8200.top-天天彩票助手帐号| www.57749.com-韩国买彩票的app| www.109686.com-京彩京彩挂机软件|