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.78575.cc-双彩到上虞多少公里| www.088536.com-福彩3d开奖图| www.806099.com-99彩票是真的吗| www.884981.com-今日七星彩预测号码| www.959859.com-五亿彩票网-| 爱购彩票www.073552.com| www.806918.com-彩票数字模糊| www.897992.com-广西体彩网官方网| www.970274.com-七彩乐近期开奖| www.zv47.com-上海彩票在哪里兑奖| www.76bk.com-最稳的彩票-| www.1800.org-彩坛之王-| www.8059.wang-水彩创意装饰画| www.82973.com-彩票拉手合作| www.729134.com-3d乐彩论坛坦码| www.817289.com-奥5时时彩走势图| www.898568.com-下期七星彩预测号码| www.967409.com-求个微信彩票交流群| 冠赢彩票www.610330.com| www.353413.com-京彩手环app下载| www.978729.com-好彩一投注技考| 彩之家www.03czj.com| www.84462.com-时时彩一期人工计划| 亿彩www.6832z.com| www.vn80.com-上海福彩网资讥| www.251608.com-彩网导航-| www.15jb.com-快三二不同-| www.8431.vip-乐彩网倒闭了| www.640968.com-荣耀国际彩票| www.248120.com-爱彩乐一分快三| www.392311.com-搜狐彩票手机版下载| www.831370.com-彩票店请员工| www.908370.com-怎么玩手机版快彩| www.974171.com-福彩刮刮乐编码| www.sw1.com-快三河北和值走势图| www.625587.com-珠江彩票app下载| www.831501.com-公司员工中彩票| www.s97.club-大家乐彩票加盟| www.362.cn-我爱中彩票网| www.5693.com-辽三彩开片特征| www.19655.cc-时时彩大小如何赢| www.82269.com-朋友给个网址买彩票| www.065483.com-信阳合买彩票| www.342199.com-0567好彩群-| www.7889.in-天下彩5334-| www.150563.com-彩票分析思路| www.525152.com-圣地彩怎么下载| www.cp7720.com-快三开奖号-| www.xd05.com-618彩票网-| www.75zk.com-体彩八卦图-| www.237277.com-中彩网3d开机号| www.385206.com-幸福又见彩虹百度云| www.560767.com-豪赢竞彩合法吗| www.673234.com-中彩双色球开奖结果| www.994247.com-彩票分析大师官方| www.037957.com-彩63-| www.590498.com-海南七星彩投注系统| www.95ys.cc-鸿彩彩种-| www.76742.com-怎么看胜负彩销量| www.997798.com-彩票中心投诉电话| www.7529.biz-1分钟时时彩能玩吗| 华为彩票www.hw52.com| www.977462.com-彩票顶呱刮靠谱吗| www.34062.com-卖彩票的人怎么赚钱| www.81184.com-外围彩票源码| www.kr20.com-上海体彩官网首页| www.880654.com-福利彩票的方法技巧| www.967787.com-聊彩-| www.cai71.cc-甘肃快三推荐| www.lk25.com-520彩票平台| www.h31.org-七星彩开奖领奖时间| www.53pd.com-吉利彩票帐号注册| www.621.bid-金口诀测彩票玉函| www.362333.com-体育彩票今天开奖| www.949793.com-k8彩-| www.cai5511.com快三走势图甘肃预测| www.mu88.com-易盈彩票苹果| www.65zo.com-梦到棺材该买彩票不| www.3282.vip-买彩票买到我绝望| www.9535.xyz-林疑彩凤来的意思| www.632485.com-彩票任选玩法| 8号彩票www.390006.com| www.863636.com-彩彩票开奖票开奖| www.243550.com-彩票数字3单式开奖| www.330495.com-买体育彩票的规则| www.402638.com-鑫彩晨-| www.509728.com-博彩用什么支付通道| www.582214.com-安装内蒙古快三| www.655255.com-七星彩私彩-| www.717896.com-87彩店竞彩下载| www.792886.com-福利彩票中奖地区| www.869736.com-爱尔兰彩票开奖结果| www.874370.com-山东竞技快三| www.970962.com-双色球元芳看彩| www.cq94.com-彩票店投资多少钱| www.05jr.com-自学彩铅难不| www.0011.cm-8个数字的彩票| www.52799.cc-彩票代投账号兼职| www.033535.com-彩站app-| www.125065.com-彩票能中五百万吗| www.783009.com-福运来彩票坑玩家吗| www.843160.com-竞彩半全场神单| www.353739.com-哪能看体彩直播| www.706012.com-时时彩票走势图大全| www.881757.com-5k彩票登陆-| www.3704.net-福彩三的综合表| www.486.me-分分彩后二杀一码| www.5318.pw-分分彩后三后二杀号| www.606229.com-江苏体彩十五选五| www.19vj.com-彩仙阁挂机软件| www.949110.com-快彩乐网站-| www.621508.com-福利彩票25选5| www.46187.com-生肖彩票开奖号码| www.000081.com-天津新宇彩钢板公司| www.079083.com-传统足彩玩法| www.144817.com-彩票论坛网址大全| www.124083.com-凤凰彩票赚钱可靠吗| www.815274.com-竞彩足球都是假的| www.885802.com-彩神百家号-| www.953090.com-体育彩票世界杯| C9999www.318548.com| www.64717.com-世界杯体彩怎么卖| www.062450.com-发大财彩票骗局| www.194838.cc-重庆时彩稳赚7绝招| www.104618.com-好彩蓝莓爆珠香烟| www.062097.com-河南省幸运彩| www.260980.com-各类彩票中奖率| www.356166.com-盛大彩票可靠吗| www.442553.com-网易红彩怎么买彩票| www.537778.com-竞彩足球比分怎么买| www.266320.com-河北体彩任三遗漏| www.031658.com-爱彩票手机版| www.107618.com-日本彩票loto6| www.586073.com-彩82彩票-| www.669632.com-海南七星彩网投| www.753708.com-qq彩蛋-| www.897653.com-彩票广告词-| www.969506.com-重庆时时彩易算| www.cai000.cc-快三开奖助手| www.317070.com-体彩中奖得主吗| www.373339.com-彩票总和大小怎么算| www.460856.com-福利彩票最晚领奖| www.930734.com-想玩快三怎么进群| www.cai6900.com快三怎么玩容易中| www.61bb.cc-赢家彩票网址| www.1405.net-福利彩票等级| www.58222.cc-福利3分彩官网| www.97769.com-彩光嫩肤美白| www.049796.com-k8彩票下载安装| www.131209.com-安阳县结婚彩礼多少| www.310567.cc-云南快三走势图表| www.479730.com-福彩快三合肥| www.615471.com-黑彩套钱-| www.73858.cc-体彩排三双双字谜| www.5968.in-福彩3d彩吧开机号| www.56362.cc-彩富网app-| www.001060.com-新彩吧图谜总汇全图| www.st37.com-彩99官方网站| www.903667.com-赢彩网55cc-| www.987845.com-5分快三赚钱的方法| www.aa60.com-体彩11选五玩法| www.18ap.com-今天开奖彩票号码| www.cp091.com-喜乐彩开奖结果查询| www.849285.com-彩票3b试机号查询|