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.vj24.com-约彩彩票ios| www.49145.com-澳洲三分彩可靠吗| www.16776.cc-辽宁省体育彩票中心| www.95203.com-福彩内部号发说说| www.088429.com-足彩数据新浪彩票| www.42jb.com-豪彩娱乐app登录| www.1382.top-水彩画风景-| www.044861.com-快三未出号码| www.274577.com-生日号码怎么买彩票| www.386752.com-中国体彩网足球彩票| www.507596.com-中彩吧娱乐登录| www.593046.com-福彩机选号-| www.665923.com-7乐彩中奖规则图片| www.739015.com-中国福建体彩官方网| www.835366.com-炫彩笔是什么东西| www.919795.com-买彩票系统全套源码| www.994075.com-红旗彩票有风险吗| www.hf74.com-1分钟快三计划网| www.5ux.cc-有靠玩彩赚钱的吗| www.84nu.com-中金彩票计划软件| www.629667.com-旧版彩77网站| www.2945.vip-福彩店装修图片| www.jb30.com-近期足彩专家预测| www.yq4.com-玩彩正确倍投| www.61km.com-体彩p3奇偶遗漏| www.687358.com-湖南体育彩票网| www.32iv.com-陇彩宝海报-| www.17726.cc-竞彩让球胜平负开奖| www.193713.com-甘肃快三开奖一定牛| www.301988.com-彩经网彩票工具| www.383781.com-七星彩贴吧百度贴吧| www.531779.com-在哪买nba篮彩| www.101957.com-彩神正规平台邀请码| www.882219.com-幸运5分彩骗局| www.57in.com-彩市英雄专家专栏| www.09570.com-3地彩吧助手| www.68398.cc-51彩神88-| www.059809.com-三地家彩论坛| www.119493.com-全发平台彩票| www.670381.com-3d陈华独胆凤彩网| www.77227.cc-105彩票不给提现| www.050143.com-彩票店做黑彩挣钱吗| www.721946.com-彩票套利贴吧| www.795970.com-全彩网八仙过海| www.962329.com-福彩快乐彩12选5| www.748469.com-红彩网有哪些app| www.526865.com-博盈彩票骗局| www.3027.vip-f彩网下载-| www.765469.com-众发彩票-| www.872403.com-手机网上买爱乐彩| www.945955.com-福建体彩论坛擂台赛| www.433516.com-彩票中奖者的经验| www.682592.com-大圣彩票家升级版| www.518426.com-彩登录-| www.828997.com-永信彩票app下载| www.53231.cc-七彩野山鸡养殖| www.071938.com-河南彩色沥青颜料| www.438628.com-腾讯分分彩购买平台| www.618056.com-所有彩票开奖公告| 同乐彩票www.029509.com| www.23889.com-精品计划彩票小助手| www.953401.com-彩神vll合法吗| www.96br.com-中福彩走势图百度| www.037313.com-彩经网打不开| www.1385.vip-简单水彩创意画| www.46523.com-彩票五星乐彩提款| www.195750.com-福彩三d开奖号码| www.860307.com-256彩票平台网站| www.960807.com-七星彩历年开奖查询| www.ds31.com-如何反彩票托的套路| www.t22.org-7喜彩票平台| www.99wz.cc-黑彩开奖系统| www.zl0.com-福彩五等奖多少钱| www.743411.com-懂彩宝大乐透| www.661.cn-足球足彩推荐分析| www.12079.com-口袋彩票安卓| www.86223.cc-3d乐彩字谜-| www.061047.com-彩票店副业-| www.33th.com-七星彩中奖的人多吗| www.1166.top-纽约28彩票-| www.007048.com-3d怪字彩吧图| www.082270.com-118彩票安卓| www.23nv.com-312彩彩票平台| www.673293.com-福彩3d什么时候开| www.971734.com-二分彩属于什么彩| www.h09.com-排列三走势彩宝网| www.291376.com-中国福利彩票快3| www.706893.com-手机制作彩票app| www.828039.com-彩民堂软件计划下载| www.83cd.com-hbwl微信福彩| www.824456.com-新彩的画法-| www.mu48.com-重庆时彩助手| www.u36.org-高频彩票盈利的方法| www.41rn.com-网易彩票结果| www.255.cn-彩钢门头-| www.3650.tv-星期六都啥彩票开奖| www.366543.com-荷花怎么用彩铅上色| www.9762.pw-七星彩专家预测默彩| www.2935.cc-福彩快三倍投计划表| www.229226.com-3d彩票走势图表| www.459756.com-约彩彩票安全吗| www.57833.cc-乐艺彩票下载| www.031897.com-彩票中奖哪期兑奖| www.651202.com-彩票摇色子-| www.356521.com-365足球竞彩官网| www.471329.com-彩神平刷软件破解| www.22276.com-结婚为什么要彩礼| www.997193.com-体彩高频彩-| www.hh99.cc-期期中彩票下载| www.k35.cn-湖北福彩3d开机号| www.02397.com-体彩天下官网| www.224519.com-福彩兼职是真的吗| www.978339.com-彩钢厂家-| www.qh74.com-好彩一网上开奖结果| www.115155.com-彩铅画人物古风图片| www.63989.com-澳洲三分彩计划| www.166010.com-68彩票快3-| www.331776.com-七乐彩票软件下载| www.740822.cc-蓝精灵彩报图b| www.823756.com-彩民堂官网-| www.901543.com-玩黑彩有赢钱的人吗| www.969892.com-福彩贪了多少钱| 9号彩票www.80767a.com| www.dy68.com-免费注册送彩金彩票| www.67717.com-彩票一夜暴富| www.120196.com-宝马彩ag-| www.365963.com-彩铅海底世界优秀| www.79yj.com-彩票9cb下载| www.91ix.com-734期期好彩| www.413840.com-出彩的文章-| www.232195.com-大发快三赢钱的方法| www.829867.com-网售彩票的网站| www.09873.com-上海体彩排四| www.126790.com-彩铅画人物古风教程| www.568555.com-昆明七彩云南| www.803210.com-彩票返奖率与中奖率| www.003046.com-菲律宾博彩ios| www.345085.com-南方福彩3d开机号| www.771544.com-时时彩安卓app| www.84815.com-宾利事业彩票网址| www.591727.com-香港博彩11码| www.996552.com-博瑞彩票主页| www.fj15.com-街机游戏快三下载| www.g22.com-排列三牛彩网| www.py13.com-七天彩下载安装| www.jl90.com-彩票网站诈骗手段| www.523048.com-时时彩杀一码公式| www.186880.com-快三秒热水器价格| www.282668.com-快三三期必中公式| www.38535.cc-时彩网站-| www.b18.club-福彩开奖公告大乐透| www.41zd.com-491彩票论坛| www.268440.com-福彩3d新浪直播| www.845883.com-中彩票一等奖的体验| www.96655.cc-彩票黑募-| www.081278.com-福彩客服电话| www.304856.com-大发快三稳赢计划| www.974773.com-双色球中奖上亿彩民| www.82sy.com-悦心亿彩违法| www.7153.com-七彩艺校怎么样| www.24644.com-彩铅画入门教程图解| www.65486.com-炫彩是什么-| www.236058.com-首页新彩票走势网| www.297383.com-上海快三二码遗漏表|