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.65045.com-竞彩是赌博吗| www.128256.com-福彩双色球蓝球定胆| www.125172.com-彩票如何选号规律| www.323696.com-四川体彩金七乐规则| www.375500.com-中国体彩在线培训| www.538516.com-约彩票下载安装| www.287799.com-够彩大厅-| www.363612.com-杏彩168登录网址| www.037018.com-超级彩票助手官方| www.028819.com-九号彩票下载| www.rk52.com-福建体彩22选5| www.424.biz-有彩票软件吗| www.015785.com-手机七星彩画规律表| www.139164.com-天天时时彩计划软件| www.266197.com-河北快三近50| www.385851.com-福彩中心几点上班| www.18659.cc-彩票下载领彩金| www.2xq.cc-黑彩大平台-| www.74690.cc-华达竞彩旗舰店| www.58003.com-家彩网预测-| www.218071.com-吉林快三网站盘| www.367532.com-手绘彩铅樱花树教程| www.565625.com-官方手机彩票哪个好| www.760668.com-体彩一共几位数字| www.648710.com-云利来彩票-| www.026797.com-佰万彩票刷流水| www.172767.com-福彩快三稳赚技巧| www.980454.com-彩玲下载-| www.308949.com-全国快三开奖平台| www.576992.com-天天彩票维护时间表| www.6639.me-多乐彩走势图解| www.013135.com-七星彩千军万马早版| www.356484.com-做外卖送彩票犯法吗| www.624973.com-彩票介绍话术大全| www.770796.com-分分时时彩平台下载| www.957811.com-七星彩每期四组头尾| www.cp511.cc-最新福彩快3助手| www.429292.com-彩虹伞平安春节教案| www.72vx.com-竞彩足球串关表说明| www.233088.com-新浪足球彩票风暴网| www.303969.com-中国福彩报-| www.659070.com-快三双和值遗漏数据| 500彩票www.514077.com| www.21128.cc-体育彩票和福彩开奖| www.019529.com-四川福彩网官方网站| www.163043.com-彩票帮投是什么意思| www.302725.com-七星彩2元网走势图| www.206641.com-正规福彩快三app| www.338538.cc-中山市福利彩票中心| www.985083.com-竞彩258彩票骗| www.5961.biz-彩民随机彩票| www.790722.com-彩票选号在线| www.558714.com-腃龙时时彩做计划| www.04jy.com-如何控制大发快三| www.322776.com-高手彩票网123| www.521024.com-内蒙古体彩下载软件| www.744666.com-228彩票app-| 网易彩票www.506433.com| www.683122.com-那个软件买彩票| www.993.cm-福彩三d精华布衣图| www.996800.cc-北京彩票中心地址| www.511683.com-时时彩真的我输怕了| www.490588.com-鼎丰彩票-| www.594132.com-七彩时时彩-| www.635703.com-彩虹6号围攻单机| www.726538.com-1516中彩票平台| www.qj47.com-好彩2复式投注表| www.177992.com-快三广西-| www.by95.com-福利彩票几期查询| www.250077.com-购彩贴吧-| www.965661.com-彩票宝提现失败| www.og5.com-下载体彩十一选五| www.018773.com-福彩三d藏机图今日| www.1628.bid-中国体育彩票足彩网| www.04vw.com-彼岸花彩铅绘画教程| www.e36.cc-印尼三分彩开奖号码| www.3096.biz-买不了世界杯彩票| www.273600.com-小崔彩票采访| www.62911.com-竞彩赛程表-| www.012117.com-福彩三码最大遗漏| www.17yb.com-彩金项链断了能接吗| www.5283.cc-甘肃彩票双色球开奖| www.644422.com-九号彩票骗局| www.49146.com-两分时时彩正规吗| www.53899.cc-时时彩组三倍投方法| www.553553.com-竞彩nba宣传海报| www.00kg.com-彩虹花变化极多| www.c38.com-深圳风彩开奖| www.662252.com-七彩乐开奖-| www.53829.cc-彩球投注靠谱吗| www.075392.com-上饶体彩征召网点| www.385068.com-状元彩票网-| www.636341.com-七彩冰淇淋机| www.95936.com-公益福彩快三| www.2510.org-246天天好彩票| www.309621.com-彩票中奖哪里兑换| www.336711.com-福彩快三如何看规律| www.521597.com-7星彩怎么中奖| www.ud04.com-体彩排列3奖金多少| www.03zp.com-彩铅古代桃花画法| www.66wn.com-杏耀彩票怎么开代理| www.49lh.com-竞彩官电脑版下载| www.561800.com-开户送彩金博彩| www.03165.com-35彩票是不是真的| www.640303.com-新浪爱彩手机客户端| www.9626.cn-胜彩高手-| www.47648.com-好彩妹是哪部电视剧| www.845563.com-竞彩最高投注金额| www.900173.com-彩票网淘彩娱乐| www.991566.com-百宝彩账号-| www.ab07.com-体彩任选三玩法| www.vy98.com-香港有什么彩票种类| www.170075.com-江苏福彩快三走势图| www.5265.com-派彩怎么装在电视上| www.1949.ren-彩票推荐小钢炮预测| www.99627.cc-双色球神彩飞扬专栏| www.111504.com-3分彩是什么意思| www.78uy.com-台湾5分彩app| www.045740.com-福彩体彩开奖结果| www.158455.com-龙江福利彩票开奖号| www.2967.pw-速赢彩用户注册| www.128485.com-七天彩苹果-| www.261801.com-腾讯快三开奖现场| www.380388.com-我我要查彩票开奖| www.568366.com-京彩官网-| 彩票8www.cp8019.cc| www.735028.com-环球彩票平台登录| www.184955.com-彩神8下载网址| www.559520.com-七星彩众彩网专家| www.635885.com-快三中两个有奖吗| www.701803.com-利用博彩漏洞赚钱| www.800334.com-卓易彩票怎么没有了| www.895645.com-四场进球彩推荐| www.969179.com-金山彩票软件正规吗| www.850897.com-时时彩百位规律| www.916557.com-彩票哪个平台稳| www.972297.com-q彩票网是真的吗| 大赢家彩票平台www.278203.com| www.505172.com-中乐彩网-| www.645229.com-易经彩票预测方法| www.753354.com-搜狗彩票为什么还在| www.874156.com-福彩3d布衣天下i| www.67va.com-鸿奇彩票靠谱吗| www.631545.com-体育七星彩走势图| www.698979.com-彩铅颜色调色表图| www.785013.com-乐优彩票ios| www.44037.com-北京中彩-| www.021547.com-多宝彩票app| www.206137.com-五分彩是全国统一吗| www.884575.com-快三技巧大小单双句| www.957614.com-历年清明节七星彩| 500彩票www.368477.com| www.667496.com-电脑澳门彩球24码| www.738953.com-福彩彩票高手交流群| www.19aa.cc-星期五福利彩票开奖| www.16ps.com-鑫彩娱乐下载安装| www.005875.com-博众时时彩手机软件| www.04vl.com-福彩三d王滨字谜| www.99tr.com-中国福彩管理中心| www.vb23.com-青岛体育彩票站点| www.644.bid-时时彩彩票易位理论| www.013722.com-七星彩合直走势| www.09od.com-玩彩网官网app| www.9192.cc-新加坡大彩开奖号码|