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.zb59.com-彩票会作假吗| www.84sm.com-足彩五串一推荐| www.753051.com-彩经网3d走势图大| www.086286.com-彩客网竞彩下载| www.307511.com-大发快三可以作假吗| www.488487.com-彩经网组选杀号| www.588259.com-七星彩字谜-| www.796826.com-彩879平台登录| www.897484.com-官方竞彩足球胜平负| www.983184.com-公务员可以买彩票吗| www.lr40.com-网络彩票排行版| www.01ez.com-彩虹歌词羽泉| www.630330.com-彩店二维码图片| www.234773.com-体彩跨度振幅走势图| www.357666.cc-彩票中奖父母领奖| www.474077.com-福彩3d讲座课程| www.e35.shop-乐彩彩票登录| www.551815.com-爱彩票048cc| www.tk45.com-河南福彩走势图表| www.000746.com-彩票01软件好用吗| www.188148.com-北京快三开奖详情| www.099095.com-中彩那天教案| www.193535.com-乐购彩彩票是真的吗| www.602301.com-游戏厅里玩游戏彩票| www.667157.com-乐彩实战擂台论坛| www.734563.com-风采和风彩-| www.799111.com-体彩票超级大乐透| www.867630.com-七星彩几点开奖直播| www.933907.com-七星彩助手-| www.982394.com-老时时彩开奖历史| www.cp7911.com-福彩开奖双色球| www.259988.com-京东彩票诈骗| www.432888.cc-幻彩官网-| www.263610.com-有人带着玩彩票骗局| www.391282.com-易网彩票软件彩下载| www.151028.com-3分快三官网开奖| www.67108.com-邢台福彩中心地址| www.295936.com-一分快三骗局过程| www.471847.com-彩迷神马-| www.188282.com-高频彩合买-| www.962631.com-河内五分彩在线预测| www.893702.com-安徽快三和值7| www.79923.cc-微信彩票游戏规则| www.01791.com-彩票时间调整| www.706813.com-网上三分彩是假的| www.740085.com-澳彩app免费下载| www.522693.com-陕西福彩中心地址| www.929599.com-蛙牛彩票17500| www.992129.com-中国足彩馆踩踏网站| www.hh72.cc-免费下载快三助手| www.82.la-中国彩吧资讯搜索| www.356.club-职业高频彩-| www.301680.com-体彩字迷汇总| www.333427.com-彩票数学挑选算法| www.450187.com-爱尚彩注册| www.567942.com-七彩山鸡养殖价格| www.662813.com-马来西亚3d彩票| www.250240.com-云购彩app下载| www.324638.com-中彩票的几率| www.88fh.com-彩票粉丝-| www.609232.com-派彩网违法吗| www.699097.com-生彩有道双色球专栏| www.589235.com-七星彩开心交流区| www.669270.com-海南即开型彩票| www.877666.cc-境外彩票诈骗| www.971412.com-怎样购安徽手机彩票| www.cai2499.com安徽快三.遗漏| www.6630.net-香港红财神报彩图| www.18115.cc-竞彩比分方法| www.71438.com-福彩福彩开奖结果| www.657812.com-ok精彩-| www.653516.com-中国福彩云南快三| www.761241.com-四川福彩网官方首页| www.52792.cc-彩票743好彩| www.007816.com-手机彩票网下载安装| www.076276.com-一幅图猜生肖的彩票| www.184300.com-网络彩票骗局揭秘| www.656741.com-彩票中数字的奥妙| www.781520.com-2019吉林省黑彩| www.871225.cc-773彩票app-| www.933970.com-博彩套利违法吗| www.987134.com-海南快三平台| www.fw44.cc-黑彩快三有没有赢的| www.626798.com-买彩票随机还是自选| www.8518.org-彩贝游戏的兑换码| www.15ix.com-腾讯75秒彩走势图| www.124.live-儿童歌曲彩虹的约定| www.012938.com-彩界神通今日双胆| www.478.cm-福彩彩票论坛| www.652068.com-pk彩票手机版下载| www.56808.cc-福建福彩快三彩控| www.954427.com-福建快三走势图下载| www.mx1.cc-网易人人中彩票| www.rt00.com-中福网彩票是真的吗| www.11la.com-信天下彩票-| www.702173.com-快开型彩票快3| www.557055.com-577彩票三肖| www.59bt.cc-体彩足球竞彩结果| www.139019.com-同城彩票手机版| www.129204.com-星期五有什么彩票| www.26993.com-2元彩票app下载| www.22462.com-因为彩礼闹翻| www.760342.com-今晚好彩2开奖| www.18997.cc-彩票中奖助手下载| www.178634.com-体彩31选7开奖| www.74un.com-105彩票中奖福地| www.81910.com-v8彩票手机下载| www.339218.com-生彩宝手机免费版| www.125095.com-彩票有哪些类型| www.03ws.com-第九彩票-| www.1906.vip-贵阳多彩贵州城| www.p83.org-提现正常的彩票网站| www.8074.vip-幸运飞艇黑彩| www.7054.cc-213彩票网app| www.679113.com-凤凰时时彩登录网址| www.771754.com-时时彩开奖中心| www.836497.com-腾讯快彩是什么| www.899366.com-博发彩票犯法吗| www.968438.com-彩民论坛首页| www.cp419.cc-私彩买到多少违法| www.391585.com-体育彩票安装| www.0427.date-993彩票下载| www.374522.com-福利彩票哪种奖金高| www.474565.com-美国快三下载安装| www.202650.com-网易购彩163| www.306029.com-彩票1216网站| www.412177.com-青蛙彩票新版跑狗| www.522819.com-51彩虹登录入口| www.769976.com-彩票线上购买| www.875105.com-彩吧图谜总汇全图| www.939075.com-c58彩票网站| www.991273.com-旺财彩票-| www.fm53.com-广西福彩快3间隔值| www.7595.loan-百胜pc彩票网| www.cp1234.cc-三分快三精准计划| www.lb88.cc-中彩网3d彩报| www.hy11.com-福彩3d和尾走势图| www.999151.com-彩乐汇登录-| www.pe49.com-众彩之家下载| www.688003.com-足球竞彩交流微信群| www.800020.cc-福利彩票视频彩票| www.890241.com-高频时时彩app| www.cai7779.com福建快三开奖走势图| www.303188.com-七星彩规律表图纸| www.429015.com-新彩吧字谜今日荐号| www.554486.com-彩票平衡因子算法| www.646345.com-日乙联赛竞彩口诀| www.766091.com-广西快三计划全天| www.p61.net-香港快三玩法| www.38md.com-彩铅儿童大型风景画| www.3490.xyz-博彩老平台-| www.603757.com-粉彩少女-| www.38887.com-中彩在线计划网页| www.107485.com-凤凰彩票开挂| www.03010.com-重庆时时彩作弊吗| www.83861.cc-传奇彩票可靠吗| www.356214.com-每日足彩分析| www.9257.cn-彩票培训师考试| www.680559.com-亚彩会平台app| www.950234.com-新华网网络彩票| www.996042.com-足彩竞彩北单统计| www.io97.com-五百彩票网官网| www.20qx.com-体彩2月16日开奖| www.968064.com-彩票开奖网易彩票|