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.862771.com-竞猜足球购彩大厅| www.5575.xyz-彩票平台推广的技巧| www.47774.com-陕西体彩中心在哪| www.113567.com-骰子猜大小彩票| www.390955.com-久盈彩票-| www.905092.com-福利彩票代理加盟| 大赢家彩票www.599476.com| www.1337.in-七乐彩规则怎么玩法| www.957837.com-体彩和福彩合并| www.141.mobi-广武彩虹谷-| www.25yo.com-彩票群一直赚钱| www.773631.com-彩票新用户送彩金的| www.917749.com-彩虹代刷网授权查询| www.cv24.com-凤凰私彩平台怎么进| www.229112.com-福彩店转让-| www.07397.com-体彩和福彩开将结果| www.217.space-玩彩网官网老版下载| www.111024.com-乐彩客官网下载| www.185535.com-北京福彩快三一定| www.355451.com-彩票2元网打不开| www.581067.com-开彩吧kc8hk| www.670449.com-网易彩票走势图三分| www.788537.com-竞彩咨询-| www.867918.com-南国彩票七星彩论| www.991896.com-香港十分彩可信吗| www.jg91.com-网易彩票怎么兑奖| www.2fd.com-时时彩是不是合法的| www.497666.com-想了解一下辉煌彩票| www.082424.com-163彩票下载| www.97gq.com-中乐彩网-| www.256692.com-彩票有哪些官方网站| www.633233.com-怎么竞彩篮球少了| www.ci40.com-吉林快三害人| www.17.bid-11选5大彩鲸网站| www.634.cm-福彩网邀请码多少| www.309686.com-体彩七位数开奖号码| www.516408.com-快乐三分彩怎么玩法| www.888336.cc-周公解梦七星彩梦册| www.ti7.cc-彩票开奖结果查绚0| www.ma28.com-彩票365-| www.882856.com-棒棒彩票计划网| www.983146.com-新盈彩官方网站| www.uv07.com-重庆快三最新骗局| www.700.la-竞彩二串一计划图| www.853741.com-天津彩票快时时彩| www.972874.com-足球彩客网-| www.gx90.com-共享彩票gx993| www.26oo.com-东莞大朗彩票站转让| www.26ez.com-中国体彩即开8| www.706007.com-中回竞彩网-| www.378777.com-南粤风釆好彩3开奖| www.377626.com-彩票店门头照片| www.0156.top-无彩色系与有彩色系| www.586776.com-世界奖金最高彩票| www.718515.com-男生彩虹什么意思| www.796116.com-享彩直播-| www.866287.com-搜狐彩票网官网首页| www.077070.com-彩票为什么不算赌博| www.23653.cc-富裕彩票-| www.812448.com-中彩票了怎么去兑奖| www.882841.com-彩票赚流水什么意思| www.966800.com-燕赵福彩排列五官网| www.ay25.com-江西福彩新快三走图| www.7647.me-体彩标志含义| www.894205.com-旧版彩经网-| www.5zc.cc-牛牛彩票平台| www.12301.com-玩彩票wcpcc| www.96928.cc-国家统一快彩| www.110572.com-彩票9-| www.221453.com-中福网彩票那个群| www.503399.com-绝密赢彩-| www.49399.cc-极速时时彩骗局| www.062340.com-广西快三闯关计划| www.819148.com-帮别人玩彩票赚工资| www.426648.com-3d福星福彩推荐号| www.718253.com-体彩手机客户端| www.812948.com-手机钢化彩膜怎么贴| www.893128.com-9cb彩计划-| www.982188.com-福彩3d官网新彩网| www.fc1.com-青海快三电子版| www.ss46.com-福彩百位振幅走势图| www.04dv.com-漳州体育彩票店转让| www.92if.com-彩票店店员工资| www.2667.xyz-福彩3d和值全图表| www.146533.com-竞彩篮彩比分直播| www.284288.com-查询福利彩票下载| www.907518.com-红彩网骗局-| www.974990.com-体彩大乐透前三加一| www.vq18.com-快三是哪里的彩票| www.42mw.com-利辛七彩世界| www.iv55.com-福建体彩十一选五| www.623688.com-财富彩票黑吗| www.701813.com-十四场足彩竞猜结果| www.776796.com-四川丹彩快三| www.883884.com-彩票快三入门| www.948839.com-福彩好运快3| 五星彩票www.5xch.com| www.cr30.com-彩客网快三-| www.wg42.com-彩计划全能版| www.22ac.com-d9彩票是官方的吗| www.91pe.com-十三亿彩票app| www.377959.com-体彩电视机怎么安装| www.505331.com-博彩之星趋势软件| www.587979.com-a3彩色激光复合机| www.693676.com-还能用的彩票app| www.789031.com-36彩票全国开奖| www.886993.com-体育彩票是否真实| www.987923.com-51中彩官网-| www.ga47.com-酷发财团队彩票计划| www.133250.com-富彩彩票吧-| www.583258.com-彩乐国际娱乐诚| www.155323.com-体彩胜负平玩法| www.350969.com-好彩生肖数字表| www.444610.com-名人彩票app下载| www.568073.com-买体彩输了十四万| www.727923.com-亿彩网手机平台登录| www.857213.com-恒彩测试88-| www.99jf.com-福彩三地字迷| www.657021.com-举报黑彩需要什么| www.89652.com-怎样玩幸运快三| www.518147.com-体彩大乐透谜语| www.088007.com-下载百盈快三| www.660007.cc-篮彩大小分推荐| www.302301.com-3d走势图彩经网| www.399376.com-买彩票算违法吗| www.833633.com-日免无嘴好彩香烟| www.j21.cc-福彩20-| www.170341.com-贵州快三走势图规律| www.525639.com-彩票税费怎么算| www.380498.com-吉林快三11和| www.968647.com-足球比分中国足彩网| www.cp3066.com-当彩票托真实经历| www.oi75.com-百宝彩票吉林快三| www.04gt.com-彩票中奖方法| www.332909.com-彩经网怎么打不开| www.670803.com-国家正规彩票种类| www.341163.com-拉萨市福利彩票中心| www.433559.com-彩民周刊官方下载| www.621967.com-彩运网官方下载| www.727356.com-快彩奇迹团队| www.808033.com-七星彩开奖频道| www.906036.com-国彩网投怎么玩| www.1ni.com-人们是否应该买彩票| www.35wy.com-沈阳体彩中心地址| www.443759.com-七星彩中奖专业户| www.768811.com-奥淘彩票app| www.862163.com-福彩跑马幸运彩下载| www.572973.com-福利体彩票153期| www.dv0.com-湖快三走式图| www.rs04.com-买七星彩能中大奖吗| www.522203.com-齐鲁福彩网-| www.654079.com-金龙彩票认证官网| www.757091.com-彩票购物软件下载| www.863134.com-彩票走势图接口| www.708240.com-足彩稳胆如何选| www.7255.loan-彩虹甜筒冰淇淋机| www.00601.com-南方双彩网专家杀号| www.333319.com-80彩票平台靠谱吗| www.085159.com-彩之网首页-| www.85uk.com-代打福利彩票游戏| www.9447.live-一比分彩票走势图| www.76700.cc-彩票一360彩票| www.050698.com-福利彩票自助售票机| www.45lt.com-苏州足球彩票店|