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天

知道了
亚洲28 大赢家彩票平台www.769179.com| www.va06.com-钢炮福彩-| www.55wn.com-pcd彩票-| www.935432.com-正规彩票网有哪些| www.td4.com-福建体彩开奖结果| www.24xf.com-彩票注册送28| www.1659.vip-精彩靓妍美白祛斑霜| www.077171.com-青海快三彩票app| www.23994.com-体彩管理中心| www.42250.com-彩经网为什么打不开| www.238206.com-快河南快三开奖结果| www.365360.cc-彩库女装加盟| www.7924.me-云来彩票手机版| www.878782.com-福彩积分卡怎么办| www.279273.com-微信群彩票骗局揭秘| www.509923.com-500彩票黑彩| www.632531.com-七星彩网站资料大全| www.838371.com-快三辅助软件谁用过| www.973417.com-彩虹宝宝新版| www.gi72.com-一天快三秒-| www.57583.com-ag彩数据彩票名站| www.027950.com-京东快彩是真的假的| www.cp9585.com-湖北快三今天开奖| www.2go.com-网易不能买彩票了| www.49kk.cc-豹子彩票-| www.288305.com-彩票高手交流论坛| www.16939.com-可变条码彩票厂家| www.ek17.cc-天齐网彩吧论坛网| www.62ki.com-随机数七星彩| www.118268.com-刮彩票容易中吗| www.0292.xyz-曲靖彩票店转让| www.25819.com-中国体彩11选5| www.588577.com-七星彩本期预测码| www.71qc.com-恒大时时彩-| www.7392.top-哈尔滨体育彩票出兑| www.94ra.com-易彩网平正规平台吗| www.068038.com-福彩快3属于犯法吗| www.178277.com-彩票直三什么意思| www.466999.cc-七乐彩开机试机号| www.518019.com-福彩中心主任现任| www.2iy.com-彩搜網-| www.8pu.com-竞彩店转让信息| 中彩网www.71233x.com| www.312565.com-3d福彩走势图预测| www.in11.com-手机怎么买福利彩票| www.g97.com-cb8彩软件-| www.jk07.com-全民快三是真的吗| www.45vl.com-鼎盛国际投彩靠谱| www.79110.com-手机彩铃怎么定制| www.832307.com-下载七彩视界| www.948135.com-神彩福牛双色球网站| www.3wq.com-55彩票微博日赚| www.099996.com-彩票22官网登录| www.387728.com-赛果及派彩结果| www.030084.com-大发彩票网是私彩吗| www.388399.cc-玩线上彩票安全吗| www.642999.com-香港地下六仺彩网址| www.366731.com-福彩今日开奖吗| www.920648.com-鑫彩网骗局揭秘| www.975073.com-海南七星彩怎么玩法| www.cp8128.com-易彩快三哪里下载| www.qt80.com-富人怎样买彩票的| www.5272.cc-彩票店一天的销售额| www.934918.com-福彩3d分分快三| 乐彩网www.160951.com| www.223.online-淘彩票邀请码多少| 网易彩票www.07163r.com| www.954033.com-南粤风采好彩3玩法| 购彩在线www.66332b.com| www.qy05.com-如何分析三分快三| www.cv69.com-湖北省快三开奖号| www.350131.com-福彩3+d开奖结果| www.82790.com-足彩第19041期| www.159.in-彩虹别称-| www.65fv.com-说彩预测-| www.1720.org-绑定自助领取彩金| www.520125.com-爱投彩票网投可靠吗| www.812262.com-双色球预测彩吧网| www.910563.com-彩99客户端下载| www.994606.com-中彩网基本走势图| www.ud68.com-乐和彩app-| www.102951.com-口袋彩票应用合法吗| www.040125.com-足彩合买app| www.86865.com-1分快三的投注技巧| www.78385.com-3d彩票图迷字三| www.560626.com-重庆时时彩5星直选| www.654542.com-彩友吧彩民的家| www.771116.com-一分钟时时彩图片| www.598263.com-微彩软件下载苹果版| www.994892.com-好彩网5583-| www.wx51.com-福彩三d综合版| www.543648.com-天下精英彩免费资料| www.804336.com-网络体彩解封| www.857210.com-柬埔寨打工彩票推广| www.954531.com-信誉彩票1966| www.ch0.cc-500快3彩票-| www.33131.cc-易彩快三大小走势图| www.001107.com-篮球竞彩新浪博客| www.018196.com-福利彩票扫码查中奖| www.181767.com-湖北快三预测号| www.651581.com-新加坡永利彩票| www.94733.com-竞彩足球平均优化| www.091031.cc-下彩网官网登录| www.153333.com-三分彩规则-| www.460110.com-福利彩票赛车直播| www.75tf.com-苹果精彩-| www.88sp.com-连连中彩票合法吗| www.982578.com-同城彩票官网| www.dd47.com-福利彩票彩种| www.255157.com-利用时时彩漏洞赚钱| www.26et.com-杨哥说彩双色球今天| www.637058.com-谁有时时彩做号软件| www.750938.com-98098彩票信誉| www.826977.com-怎么样戒高频彩票| www.899690.com-彩83网址-| www.964475.com-新浪体育足彩频道| 购彩在线www.66332r.com| www.il99.com-东莞体彩中心| www.yu07.com-天福彩20选8| www.22tz.com-体彩排五几点出号| www.101946.com-uc彩票注册送28| www.ki01.com-体彩网大乐透中奖| www.799605.com-体育彩票怎么选号码| 818合彩www.www.9889hc.com| www.23vz.com-ag体育博彩-| www.2466.cm-今天体育彩票开奖| www.011189.com-昨晚彩票开奖号码| www.235921.com-足彩竞彩-| www.355583.com-刘军玩彩真的吗| www.226996.com-江西彩票官网| www.722886.com-大钱庄彩票-| www.la6.cc-快快三走势-| www.026626.com-黑彩前十名排行榜| www.117864.com-彩福厨房水龙头| www.211832.com-彩票5-| www.141651.com-彩8彩票是正规吗| www.742919.com-金山彩票下载最新版| www.85tq.com-七乐彩全部中奖号码| www.635371.com-澳门博彩罪案| www.27sj.com-博发彩票999| www.334360.com-万达彩票平台可信吗| www.391398.com-三彩连衣裙-| www.820229.com-各种天价彩礼| www.888236.com-诸葛智彩软件下载| www.951218.com-500足彩即时| www.cai773.com-快三在线稳定计划| www.38969.cc-旺彩平台-| www.95348.com-足彩彩票-| www.98gg.com-名人在线的彩票| www.59112.cc-2019年福利彩票| www.809872.com-zg中国体彩网| www.560850.com-博奥彩票软件下载| www.711258.cc-聚名彩票-| www.831596.com-日本7亿彩票怎么买| 汇彩网www.www.hcw266.com| www.11ei.com-新彩的制作-| www.905726.com-彩69是骗局么| www.cai6177.com江苏快三基本走势图| www.572887.cc-双彩论坛排列三图谜| www.659703.com-高频彩开奖直播历史| www.739393.cc-福利彩票头条app| www.817625.com-幸运时时彩有走势图| www.913170.com-彩票网站钱提不出来| www.987065.com-聊彩大厅下载安装|