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.652528.com-为什么高频彩调整| www.444140.com-体彩七星开奖走势图| www.fj04.com-上海快三全天计划| www.2ij.com-冠军彩票导航| www.9650.com-福利彩票鸡丁刮刮奖| www.828861.com-孕妇梦见中彩票大奖| www.592368.com-彩票app销售| www.737284.com-福利3d开门彩| www.881767.com-q彩app下载-| 亿彩彩票www.588yc.com| www.760698.com-福建快彩11选五| www.923214.com-福彩三d今晚开机号| www.996940.com-快3遗漏內蒙爱彩| www.oc46.com-体育彩票泳坛夺金| www.47lg.com-时时彩代理-| www.3744.top-福彩快甘肃-| www.8cs.com-刮彩票的技巧规律| www.4334.xyz-香港福星彩419期| www.39981.cc-福利彩票网上投注站| www.029006.com-重庆时肘彩开奖宝典| www.9916.loan-万景国际彩票稳定吗| www.067800.com-怎么搭建彩票网站| www.657659.com-澳客彩票网定胆杀号| www.958664.com-福利彩票五分钟一次| www.89mx.com-足彩小四博客| www.574349.com-ct彩投手机下载| www.681930.com-下载彩计划彩票| www.780792.com-福彩22选五预测| www.919278.com-怎么开黑彩-| www.981866.com-在网上可以买彩票吗| www.ig7.cc-彩宝贝大乐透杀号| www.tn28.com-网上彩票怎么拉代理| www.16hj.com-幸运彩改版-| www.94fz.com-易彩堂靠谱么| www.2660.cc-彩票大奖彩票得主| www.8598.in-彩宝贝网工具| www.34728.com-兰州福彩网抽奖信息| www.77738.cc-彩尊国际手机版下载| www.060318.com-极速快三正规的吗| www.464490.com-体彩那天开始卖| www.560892.com-体彩走势图500期| www.630568.com-乐彩手机客户端下载| www.703006.com-我要发彩网手机版| www.779611.com-厦门彩票店亏本转让| www.855632.com-七乐彩能买七个号码| www.922609.com-深圳竞彩分析师招聘| www.982190.com-福彩新彩网首页| www.cq09.com-黑彩报案后果| www.vu51.com-免费彩票k线软件| www.27eo.com-体彩熊猫-| www.36252.cc-华彩彩票大红门| www.028843.com-亿彩堂官网-| www.276909.com-时时彩二星直选复式| www.411661.com-彩世界手机版时时彩| www.575793.com-大乐透彩票停售时间| www.776301.com-时时彩后三万能大底| www.881692.com-辉煌彩票是合法的吗| www.979471.com-彩金彩票app| www.sf40.com-七乐彩今天开奖号| www.58ud.com-彩票店中奖后有奖励| www.7124.cm-七彩建盏百科| www.33018.cc-江苏省彩票中心| www.002315.com-时时彩规律口诀05| www.082838.com-大奖网买彩票可靠吗| www.193485.com-吉体彩11选5| www.271782.com-好彩二复式注数计算| www.370754.com-时时彩票怎么下载| www.521837.com-福建体育彩票混| www.986409.com-3d彩票吧百度帖吧| www.eq44.com-炫乐彩票登录| www.16ew.com-足彩竞彩赛果开奖| www.0791.space-腾讯分分彩9码刷量| www.16081.com-时时彩群规-| www.012367.com-一定牛彩票怎么样| www.166258.com-大发快三怎么玩| www.677502.com-彩票改号代码| www.993706.com-万豪彩票送38元| www.oy27.com-彩票诈骗案成功告破| www.27ct.com-有没有人要福建体彩| www.220039.com-一分快三全天计划表| www.3490.vip-博彩是什么平台| www.rx08.com-福彩3d四码复式| www.832227.com-福彩3地今天预测号| www.946111.com-河南四彩礼-| www.eh85.com-浙快乐彩开奖| www.57zw.com-澳彩即时赔率| www.513106.com-郑州乐彩科技股份| www.61612.com-tt彩票app下载| www.191313.com-北京体彩排五开奖| www.84iu.com-彩票不让提款| www.899742.com-天天彩网站-| www.339316.com-樂博现金彩票| www.655659.com-开发彩票分析软件| www.110457.com-9彩新一代团队计划| www.079186.com-快三可以网上买吗| www.90544.com-真三国无双星彩| www.133106.com-全部彩票网站788| www.322736.com-体彩七星彩开奖直播| www.363730.com-佛教中彩虹叫什么| www.784148.com-国乐彩是什么意思| www.629.red-彩票直通车能提现么| www.06278.com-彩票稳赚不赔的方法| www.96397.com-福彩三d天气网| www.218062.com-网络彩票最新消息| www.529851.com-彩票是录播的么| www.9471.org-彩票分析专业选号器| www.033762.com-如意彩票怎么登陆| www.327828.com-一分快3彩票和值表| www.685539.com-福彩3d任意和查表| www.669683.com-五位数的彩票是哪种| www.629162.com-竞彩網-| www.793557.com-福彩赌钱机器| www.500321.cc-彩票实体店网络卖彩| www.746363.com-8亿彩app苹果| www.858814.com-今晚查彩票中奖结果| www.0288.in-彩票销售业主总结| www.440411.com-老赖中彩票被冻结| www.118052.com-125彩票是什么啊| www.964438.com-新快三网导航| www.293890.com-江苏快三前天开奖| www.539058.com-乐盈彩票赚钱吗| www.905082.com-武汉彩票店转让信息| www.u45.net-破解速赢彩大小| www.664246.com-七彩乐中奖结果图| www.507018.com-彩神8赚钱吗| www.74916.com-双彩论坛首页正版| www.740345.com-易盈彩票官网下载| www.957704.com-台湾彩乐透彩| www.582669.com-彩色简笔画房子| www.606911.com-今天买彩票选啥号好| www.85sv.com-彩票能赚到钱吗| www.018455.com-豹赢彩票app| www.672715.com-彩票开奖查询三d| www.848222.com-天价彩礼引发的悲剧| www.914656.com-彩票大发快三分析| www.68tt.com-乐彩国际可以提现吗| www.29733.com-彩96平台能提现吗| www.248301.com-江苏快福彩网| www.103578.com-新粤彩广东版| www.192402.com-甘肃快三彩票手机版| www.013898.com-网络彩票代理违法吗| www.23887.cc-彩计划下载在哪下载| www.035084.com-体育彩票倍数怎么赔| www.140030.com-天津时时彩官网| www.508.cc-99彩票时时彩平台| www.120973.com-微信彩票群如何不封| www.279662.com-时时彩万为规律| www.68888.cc-头奖彩票解决了没有| www.025454.com-福州彩票领奖中心| www.4142.vip-彩虹电影台怎样下载| www.144633.com-足彩全买低赔2串1| www.377563.com-河南体彩大乐透数据| www.828962.com-小网送彩-| www.372608.com-七彩虹颜色排序| www.703278.com-265彩票网站| www.171001.com-长春快三开奖直播| www.133484.com-十分快三是骗人的吗| www.435535.com-众彩网专家杀号定胆| www.71078.com-体育彩票在哪里买| www.91861.com-彩运8计划网址| www.105696.com-八彩林亚珍国语下载| www.252553.com-中彩网点数是钱吗| www.424033.com-乐彩33软件-| www.561363.com-九龙贵宾中彩6码料|