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.50tv.cc-下载彩票软件双色球| www.ew09.com-手机贵宾中彩网| www.p41.club-玩私彩-| www.504444.com-下载彩票投注站| www.72372.cc-福彩用哪个软件投注| www.081059.com-如何看彩票中奖没有| www.193513.com-长春快三开奖查询| www.709019.com-好的福利彩票店收入| www.137421.com-竞彩官方网站下载| www.066798.com-婚恋交友诈骗时时彩| www.579425.com-彩字的谜语-| www.370744.com-新启航彩票平台| www.879833.com-网彩有赚钱的吗| www.pz36.com-彩9官网-| www.84wn.com-时时彩输的倾家荡产| www.560814.com-体彩彩吧论坛首页| 众发彩票www.878zf.com| www.791274.com-梦见自己中彩票| www.507795.com-福彩上一期开奖号码| www.607198.com-彩票3d试机号| www.705163.com-体彩跨省能兑奖吗| www.161138.com-北京福彩中心新地址| www.777015.com-彩播最新版本| www.632153.com-体讯网彩票-| www.741543.com-彩票北京28-| www.w02.org-98吉林快三群| www.51mn.cc-正好彩票网首页| www.381780.com-福彩3d今天开奖结| www.640061.com-22彩票软件苹果版| www.849722.com-福利彩票11元5| www.937980.com-彩之王是否真的| 凤凰彩票www.77802j.com| www.up39.com-江苏快三最大遗漏值| www.994583.com-彩票遗漏值技巧| www.c75.cm-360彩票大厅| www.889250.com-彩票倍投法-| www.031636.com-福利彩票直选预测网| www.049.cm-以前的彩票值钱吗| www.4985.xyz-彩色苹果电脑| www.646672.com-双色球老彩民经验| www.08ow.com-彩神幸运飞艇全能版| www.cp4.com-贵州彩票双色球| www.992866.cc-彩票代购稳赚高收益| www.829138.com-uc彩票网合法吗| www.275798.com-时时彩做庄输了| www.701810.com-彩票利用时间差中奖| www.475192.com-金誉彩票网封了吗| www.630212.com-彩票18054-| www.725771.com-今晚福彩几点开奖| www.794786.com-快三和值9多少注| www.10si.com-鑫鸿彩票能提现吗| www.97pz.cc-易赢彩票咋样| www.053532.com-快三有挣钱-| www.536939.com-中国体彩头像| www.613613.cc-网恋香港人买彩票| www.700337.com-辽宁福彩走势| www.775393.com-彩票怎么算的数字| www.858286.com-乐购彩票好不好用| www.948179.com-众彩网3d专家汇总| 中国福利彩票www.08588s.com| www.21iu.com-美国28是什么彩票| www.724988.com-新浪体育彩票app| www.38yh.com-体彩七星彩怎么选号| www.853747.com-快乐彩票抢红包| www.367233.com-彩聊微信下载| www.165867.com-福利彩票中奖案例| www.58931.cc-六台彩迷宫五花八门| www.095166.com-彩票作假十大证据| www.196418.com-休肓彩票开奖查询| www.283575.com-1分彩和值怎么看| 亿彩堂www.87668i.com| www.230269.com-彩88开奖结果| www.391259.com-五号彩app-| www.617301.com-体育彩票采购中心| www.760411.com-最稳定的时时彩网址| www.838637.com-凯里福彩大奖无人领| www.938552.com-快三推荐湖北| www.kl3.com-彩票中奖的真实案例| www.0xn.com-彩虹星空瓶颜色搭配| www.87mc.com-新淘宝彩票软件| www.011025.com-易迅彩票是真的吗| www.7722.pw-买彩票5元都很难中| www.35792.com-顶级彩票诈骗| www.56933.com-体彩三d开奖| www.8003.com-什么是十字彩赌博| www.67813.cc-公务员中彩票违规吗| www.907203.com-快三大小稳赢倍投法| www.503376.com-星鸿娱乐时时彩网| www.94387.com-pc彩票怎么玩| www.256277.com-福彩快3网上购买| www.459758.com-体彩排列3d断组| www.253922.com-福建褔彩票官方网站| www.300051.cc-哪些是官方彩票| www.440869.com-彩钢板厚度规格表| www.031312.com-黑彩平台代理好吗| www.144967.com-3d彩报大全-| www.801752.com-福彩一体机监控下载| www.919921.com-彩票软件制作教程| www.le07.com-下载中彩娱乐| www.666001.cc-新加坡天天彩票| www.791511.com-京东竞猜彩票| www.908768.com-彩票倍投方法多少钱| www.8620.org-体彩11选五电视版| www.186735.com-中国彩票官网app| www.308981.com-福彩3d绝对布衣4| www.599271.com-玩彩票亏损安抚客户| www.180017.com-彩票快三软件| www.365126.cc-彩票冷热遗漏怎么看| www.893219.com-彩票大师-| www.186727.com-一定牛彩票-| www.257411.com-红牛彩票官网| www.344068.com-3福彩开奖30选7| www.432131.com-未来星时时彩平台| www.525305.com-无敌时时彩计划软件| www.592990.com-彩虹的重力txt| www.679397.com-彩经网官方网站| www.778656.com-1111彩票安卓版| www.861385.com-五分彩破解器| www.919357.cc-网上买彩票总是输| www.982064.com-福彩站点查询| www.ad89.com-体彩19029期| www.oc23.com-最安全的彩票网站| www.346438.com-高频时时彩开奖| www.429566.com-亿彩秒赞网-| www.518926.com-cc699彩票-| www.577654.com-安徽体彩十-| www.634443.com-七彩狐集团-| www.711739.com-五分彩彩票计划网| www.778644.com-彩经网老板走势图| www.840522.com-福彩刷流水挣钱吗| www.58869.com-福彩开奖预测结果| www.14tn.com-赢彩双色球-| www.285718.com-36o彩票开奖查询| www.388830.cc-搜福彩开奖结果| www.825682.com-山西正省快三查询| www.28992.com-喵喵机打印机彩色| www.85wf.com-福彩陈华胆码预测| www.106155.com-体彩今日开奖结果| www.166977.com-福彩五分快三是什么| www.230798.com-彩吧助手走势图带| www.298685.com-r彩票开奖结果| www.360567.cc-中国福利彩票网投| www.924866.com-全民赢彩票下载| www.970223.com-网络彩票老师带单| 500彩票www.50064n.com| www.105660.com-新彊时时彩中奖助手| www.37xx.com-快三导师微信号| www.6455.cm-速8彩票邀请码| www.10cr.com-福彩123论坛| www.875292.com-彩票规划骗局| www.942281.com-福彩双色球走势图2| www.986468.com-彩票33软件安卓版| www.pi1.com-快三玩法中奖多少钱| www.tk85.cc-公益彩票软件靠谱么| www.8wp.com-信博彩票下载| www.48ab.com-荣誉彩票犯法吗| www.2470.me-绿播彩播是什么意思| www.684654.com-中四柱预彩图| www.772001.com-五分快三的软件挂| www.131500.com-四川广元彩礼价目表| www.98438.com-分分彩计算-| www.785566.com-领航彩下载-| www.881574.com-13彩下载-| www.956730.com-竞彩欧赔规律|