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天

知道了
彩01彩票 www.17nx.com-银杏娱乐时时彩计划| www.110238.com-福彩3d怎么买法| www.576418.com-七彩官方网站| www.110322.com-360彩-| www.292582.com-北京快三开奖历史| www.427510.com-昨日竞彩结果| www.597287.com-吉林省快三形态走势| www.764693.com-七星彩早版神算子板| www.868672.com-七星彩的对数表| www.947843.com-竞彩彩票兑奖规则| 500彩票www.26299s.com| www.50949.com-大发快三下期算法| www.015714.com-够力七星彩旧版本| www.586202.com-七乐彩名专家预测| www.674880.com-福彩归什么部门管辖| www.761694.com-搜索体育彩票七星彩| www.854877.com-贵州快三今日推荐号| www.947517.com-外围足彩推荐机构| www.998937.com-幸运彩乐园下载| www.bs02.com-华彩彩票骗局| www.we54.com-福利彩票店图片| www.16rt.cc-彩票中中大奖| www.642986.com-美宝莲彩妆加盟| www.772967.com-玩彩票心得体会| www.898055.com-福利彩票宣传语图片| 福彩www.16878r.com| www.518779.com-旺彩11选5预测| www.478696.com-743好彩-| www.353300.com-凤凰公益彩票靠谱吗| www.807758.com-北京5分彩计划软件| www.970145.com-台湾有那些彩票| www.cai7676.com广西快三形势走势图| www.ty89.cc-彩票什么叫长龙| www.45280.com-中彩网视频频道| www.9361.cn-彩票官员米老鼠| www.982643.com-共享彩票黑玩家钱| www.147655.com-福星快三-| www.264802.com-彩票显示屏-| www.349640.com-常笑体彩-| www.18es.com-体彩11选5软件| www.23862.com-维彩会彩票网| www.99019.com-彩票机选器大乐透| www.121844.com-吉利时时彩开彩结果| www.99398.com-浙江福利彩票12| www.095299.com-湖南彩票1.59亿| www.186728.com-北京快乐彩开奖结果| www.886427.com-90彩票平台-| www.396956.com-福彩书籍-| www.96402.cc-2018福彩事件| www.180528.com-玩快三稳赚技巧口诀| www.139365.cc-如意彩票登录网站| www.230760.com-体彩屋app-| www.971420.com-彩九为什么下载不了| www.gn1.com-北京快三撅彩网| www.737109.com-众彩网专家预测鱼雨| www.822121.com-500万购彩网| www.909754.com-南京彩虹关爱中心| www.973999.com-美国超级彩票| www.cai550.com-快三助手安卓版| www.ij98.com-广东福彩公众号| www.28534.com-福彩助手客户端下载| www.875670.com-正规的快三软件下载| www.993003.com-竞彩官方app| www.ka35.com-数学破解彩票| www.7ep.com-足球彩票怎么看买啊| www.546969.com-国家彩票整改落实| www.739984.com-彩票3d走势图下载| www.33kg.com-快三中三不同多少钱| www.cai4888.com湖北福彩快三| www.722647.com-快三看走势-| www.140854.com-老猫研彩-| www.245211.com-福彩快开是真是假| www.318593.com-福彩3地八卦图| www.ic01.com-68彩票app下载| www.629911.com-时时彩龙虎和规则| www.863688.com-刷彩票赚钱违法吗| www.b97.cc-海南七星彩梦册查码| www.300000.com-专业的彩票预测分析| www.175238.com-手机快三投注可靠吗| www.4327.in-k彩福地登录不上去| www.182911.com-网络快三-| www.607950.com-彩友多怎么下载啊| www.957394.com-新时时彩彩票大赢家| www.7117.loan-仲博彩票是骗局吗| www.370218.com-刷彩票真的还是假的| www.ll56.com-今日中彩靠谱吗| www.dt33.com-五星彩票开奖查询| www.468420.com-湖北快三倍投计算| www.0761.in-彩票开奖api源码| www.uv.com-体彩官方彩票app| www.c63.top-历史上福彩开奖号| www.566650.com-无线代棋牌彩票平台| www.671189.com-百度彩票不能用了吗| www.765352.com-快三一分钟一期计划| www.885860.com-福彩3d彩吧图谜一| www.958001.com-狂神七星彩今晚| 大赢家彩票平台www.186371.com| www.844813.com-发福利彩票的意义| www.964736.com-澳门足彩即时赔率| www.cai8700.com今天上海快三开奖号| www.569308.com-彩票app注册送钱| www.015625.com-七星彩2元-| www.14mb.com-山东福彩群英会奖金| www.97ub.cc-百彩票-| www.4981.cc-珠海体彩兑奖中心| www.21456.com-10013联通彩票| www.834828.com-荧光炫彩头像| www.6tz.com-赠送他人彩票中奖| www.61mj.com-福彩3d秘诀-| www.524100.com-时时彩奖金调节| www.ze58.com-彩票33最新软件| www.272274.com-易彩快三有没有规律| www.365733.cc-兰州彩票中奖最近| www.472518.com-三地字谜牛彩网| www.629162.com-竞彩網-| www.210043.com-彩神v可不可靠| www.437714.com-江苏省爱彩乐十一选| www.507256.com-彩神争霸网页登录| www.506.tv-彩吧vip是真的吗| www.097135.com-体育彩票公益金项目| www.941998.cc-凤彩网预测下载| www.jt.cc-安卓版038彩票| www.305117.com-中国福利彩票35期| www.449950.com-博彩高倍-| www.615896.com-沈阳游戏厅彩票| www.737967.com-南宁安豪快三| www.942456.com-帮买彩票赚佣金的群| www.cp057.com-多乐彩开奖-| www.034570.com-谁有正规的彩票网站| www.4270.biz-福建快三全天计划| www.cp6117.com-广东福彩手机投注| www.468585.com-易点彩票字谜大全| www.360556.com-怎么买足彩赚钱| www.22214.cc-人人竞彩1.0.1| www.73825.com-体育彩票网上如何买| www.024540.com-彩福彩票app| www.082130.com-淘宝商城三彩| www.138399.com-鸿彩网靠谱吗| www.210801.com-分分快三能赢吗| www.165999.com-旺彩彩票客户端| www.586818.com-微彩吧是黑网吗| www.279063.com-彩票销售技巧和话术| www.361056.com-下载7k官方彩票网| 8号彩票www.60108y.com| www.23129.cc-彩乐乐湖北快三推荐| www.055201.com-快三黑彩举报电话| www.201153.com-七星彩最近100期| www.282945.com-机选一注七星彩| www.352653.com-时时彩被黑经历| www.55948.cc-中乐彩手机版| www.ls98.com-福彩网上能挣到钱吗| www.2146.win-全民畅赢彩票| www.821005.com-室外彩色混凝土| www.903040.com-优彩-| www.964881.com-英快三走势图带连线| 博友彩www.938527.com| www.948084.com-微信快乐彩是合法吗| www.999648.com-分分彩号码怎么算| www.as43.com-福彩基诺奖励规则| www.081982.com-曼德尔彩票万能公式| www.183592.com-优中彩彩票-| www.197426.com-澳洲五分彩开奖记录| www.358847.com-娱乐江苏乐彩| www.226910.com-彩票代理流水提成|