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.9028.top-nba总冠军彩票| www.184732.com-江苏快三彩票正规吗| www.365092.com-惠民福利彩票| www.37694.com-大赢家彩票138| www.377209.com-老腾讯分分彩走势| www.614910.com-中央2台买彩票| www.760698.com-福建快彩11选五| www.94vx.com-093彩票打不开了| www.687510.com-彩吧网3d开机号| www.824371.com-买彩票家破人亡| www.0611.cc-彩宝店买彩票| www.583873.com-足彩大赢家软件下载| www.uk92.com-天天彩选四开奖结果| www.202829.com-精彩十分玩法图| www.4275.biz-西蔵快三开奖结果| www.753569.com-s9彩票-| www.847143.com-刮彩票有中大奖的吗| www.943898.com-大联盟彩票可信吗| 160彩票www.160wt.com| 幸运彩票www.5095k.com| www.434385.com-福彩攻略-| www.850586.com-竞彩直播即时比分| www.33517.com-风彩彩票下载| www.88744.com-最新万彩吧资料| www.738373.com-湖北荆门快三查询| www.870339.com-分分钟开奖彩票| www.948304.com-彩票哪个网站可以买| www.bj9.com-湖北快三开奖图| www.cai0466.comc038彩票vip| www.k32.cc-拉萨福彩兑奖中心| www.028643.com-福彩三天计划胆论坛| www.342422.com-期期743好彩| www.di2.com-博众时时彩官方网| www.m58.win-彩票中头奖秘诀| www.711.com-足彩即时比分澳客| www.32298.com-我在8k彩票app| www.79520.cc-福彩3d遗漏走势图| www.207095.com-七乐彩几个号才中奖| www.44906.com-广东彩票手游彩| www.97755.cc-足彩竞彩今日推荐| www.067655.com-网上彩票先赢还输| www.129912.com-体彩大乐透在线购买| www.199925.com-河南福彩发行中心| www.397463.com-双色球杀号唯彩看球| www.522145.com-七乐彩连线走和图| www.610051.com-简单的彩铅画花图片| www.687965.com-福彩快3预测| www.768991.com-亚博彩票靠谱吗| www.838407.com-中国竞彩计算器篮球| www.899663.com-体彩福彩开奘结果| www.963391.com-海南体彩七星彩论坛| www.cai217.com-快三彩票投注技巧| www.iu15.com-体育彩票6+1开奖| www.zr71.com-时时彩这么玩| www.3692.wang-彩票网苹果版| www.133573.com-易彩网怎么赚钱| www.73wy.com-环球彩票可信吗| www.2751.cn-福利彩票倍数和注数| www.1ve.com-澳洲3分彩开奖记录| www.281183.com-时时彩后二四胆做法| www.633412.com-王中王生肖彩票规则| www.737951.com-哪个购彩平台最可靠| www.853828.com-陕西福彩20选8| www.947753.com-浙江十一选五爱乐彩| 500彩票www.095588.com| www.5230.mobi-派彩为负-| www.83iy.com-竞彩足球网澳客网| www.3660.org-开一个体育彩票店| www.137908.com-六福彩结果-| www.739787.com-彩票3d走势图表| www.02462.com-彩至尊app-| www.34jq.com-体彩七星几点开奖| www.2347.cc-时时彩一小时开几期| www.8075.vip-世界水彩人物| www.444177.com-福利彩票坐标走试图| www.545556.com-彩票推广员好做吗| www.612267.com-七彩虹图片大全| www.680583.com-体育彩票3亿| www.754930.com-快三三不同技巧| www.855686.com-福建体彩31选| www.916608.com-永盛彩票手机网址| www.969687.com-乐彩3d17500| www.pg21.com-胜负彩19045| www.w46.net-随时赚彩票下载| www.725856.com-类似期期中的彩票| www.7574.vip-东方彩票1343| www.56274.cc-香港数字彩票有几种| www.019529.com-四川福彩网官方网站| www.092709.com-三明福彩中心地址| www.441666.com-中国体育彩票总局| www.602460.com-祥瑞彩票官网| www.706508.com-快三规则推算| www.797048.com-赢彩彩票正规吗| www.882480.com-基诺型彩票技巧| 500彩票www.324577.com| www.91eh.com-彩票有哪些好的团队| www.55286.com-时时彩胆码技巧公式| www.078851.com-牛彩彩票网站| www.241213.com-下载河北快三投注| www.354157.com-如何买彩票中一等奖| www.501856.com-开彩365上市股价| www.12745.com-pc彩讯开-| www.53595.cc-时时彩五星单式漏洞| www.085703.com-黑科技博彩漏洞赚钱| www.894214.com-皇冠彩票导航网址| www.34695.com-金彩彩票是骗局| www.81845.com-众彩网手机版怎么样| www.074479.com-一种福利彩票称为| www.212655.com-大的私彩平台| www.6682.pw-3d丹东福彩全图| www.875967.com-下载爱乐彩快3下| www.962640.com-精英彩票下载| 500彩票www.912156.com| www.lk29.com-app快三彩票平台| www.e67.cn-蓝彩竞猜-| www.039752.com-华彩在线是不是骗局| www.611773.com-福彩网点充值| www.9896.cc-怏彩-| www.882623.com-易彩堂可信吗| www.68018.com-上海市体彩兑奖| www.450036.com-七星彩赚钱方法大全| 大赢家彩票平台www.109027.com| www.620710.com-盈利彩票官网| www.0314.love-大发快三计划表| www.959621.com-彩票团队计划高手| www.929077.com-快三单双赌博技巧| 奔驰彩票www.281877.com| www.127051.com-福建福彩快3预测| www.1254.xyz-快三豹子号奖金多少| www.155613.com-炫彩背包-| www.399522.com-sk国际彩票-| www.08605.cc-陕西中国福利彩票| www.778077.com-彩生活盈利模式| www.58113.cc-彩谜天地全国联销图| www.442296.com-下载福利彩票3d| www.gj75.com-彩票端一分快三| www.593338.com-福彩3d财神推荐号| www.118500.com-uu彩票跑路-| www.493248.com-福利彩票天中图库| www.600486.com-两块钱的彩票| www.053232.com-有没有快三交流群| www.867638.com-七星彩头尾中奖| www.26231.com-曼谷十分彩真的假的| www.567467.com-中国福利彩票42期| www.869327.com-手机怎么买七星彩| 开心彩票www.557595.com| www.267000.com-彩票是骗局揭秘| www.856671.com-七星体育彩票走势图| www.20ln.com-加盟彩票软件网站| www.35544.com-彩民红心水高手论坛| www.48891.com-幸运时时彩开奖直播| www.88616.com-87彩票管理-| www.289367.com-福利彩票三十六选七| www.047955.com-3d数字彩票投注通| www.836325.com-福彩三d直播开奖| www.km2.cc-大发快三走势图规律| www.y78.org-正版猛虎报报彩图| www.138183.com-360彩票对比器| www.328043.com-彩吧论坛首页正版| www.773772.com-快三多少倍封顶| www.897943.com-彩票店警示语| www.9066.xyz-今晚七彩星开彩结果| www.12301.com-玩彩票wcpcc| www.380979.com-体彩11选5预测|