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天

知道了
1分快三 www.896332.com-网络彩票代理加盟| www.714722.com-826彩票开奖网| www.799557.com-彩票中奖领取流程| www.pw14.com-英国彩票中奖号码| www.928012.com-福利彩开奖直播| www.064758.com-乐迎彩票骗局| www.872005.com-彩票行家开奖记录| www.954739.com-福彩兑奖期限| 全民彩票www.218292.com| www.835.xyz-东方彩票网网址多少| www.5549.vip-足彩18035期| www.82qy.com-七星彩奖结果| www.039658.com-会员登陆9b彩票| www.130968.com-彩礼钱顺口溜| www.211114.com-安徽福彩网查询| www.778431.com-宁波体彩一等奖兑奖| www.794523.cc-福彩订单助手| www.551323.com-四场进球彩投注| www.76234.cc-温州福利彩票中心| www.75322.cc-西宁彩票店转让| www.095374.com-贵州体彩网排列三| www.222224.com-彩票过完年几号开售| www.358460.com-怎么买福利彩票两元| www.539336.com-彩票实体店会倒闭| www.665340.com-竞彩海报-| www.724.host-博盈彩票骗局| www.517920.com-国外彩票网站| www.960640.com-时时彩注册送18元| www.sr11.com-福彩3d干期开机号| www.567895.cc-体彩几个号码| www.837370.com-体彩世界杯怎么买| www.er6.com-分分快三开奖官网| www.267589.com-彩票计划大全| www.150989.com-湖北快三360直播| www.42179.com-七星彩开奖结里| www.966918.com-彩票网络能购买吗| www.tx88.com-彩票助手软件电脑版| www.1770.org-开心七星彩票网| www.t78.cc-网上拉人买彩票| www.sb9.com-快乐彩走势图今天| www.287697.com-福利彩票双色球合买| www.g16.net-福彩3d豪华版下载| www.284110.com-数字型彩票的种类| www.498013.com-苹果集团官网时时彩| www.664567.com-自然风景彩铅画简单| www.850979.com-腾讯的博彩软件| 梦想彩票站www.43131o.com| www.782028.com-福彩和体彩真实吗| www.616350.com-亚虎亚彩会游戏官网| www.33919.cc-v8彩票网址-| www.88472.com-网络彩票推广合法吗| www.0nr.com-添光溢彩近义词| www.82wg.com-时时彩专家乐彩网| www.347411.com-天天爱彩票怎么样| www.444540.com-彩票6加1开奖查询| www.123416.com-高频彩看走势图技巧| www.6tc.com-竞彩分分彩-| www.kb88.com-数字3彩票吧| www.018.org-三d天天中彩吧| www.7757.in-体彩大奖-| www.65827.com-七星彩摇奖模拟软件| www.107586.com-01彩票ios-| www.255606.com-七乐彩怎么玩法| www.352826.com-手机买黑彩-| www.135136.com-安卓彩票软件哪个好| www.797713.com-足彩新浪比分直播| www.1732.win-赌彩票能发才吗| www.551746.com-帮朋友买彩票| www.717951.com-手机版快三计划| www.883216.com-鸿彩印刷厂-| www.zj2.cc-福彩3d玩法规则| www.241292.com-七星彩全年包码| www.329911.com-山西体彩+一选五| www.077586.com-乐彩开奖-| www.145844.com-基诺彩开奖记录| www.221942.com-北京福彩网官网| www.76xs.com-北京七星彩开奖结| www.872193.com-贵阳彩票一等奖| www.980972.com-旺彩推荐中奖号码| www.qt52.com-上海快三一定牛网站| www.60lw.com-福彩和值跨度速查表| www.6458.vip-豪彩娱乐时时彩注册| www.6154.com-香港马彩网站| www.971930.com-彩拾注册-| www.cai7800.com体彩排列五开奖| www.195138.cc-彩票规则玩法| www.886440.com-中国彩票有真实性吗| www.366367.com-国产彩电什么牌子好| www.549720.com-为什么还有网络售彩| www.695049.com-吉林长春快三住手下| www.780425.com-人工智能彩票软件| www.866943.com-湛江七星彩头尾网站| www.942535.com-体彩模拟摇奖器| 爱上彩票www.ascp6.com| www.mh60.com-好彩网靠谱吗| www.205716.com-大发快三计划群| www.306946.com-贵州福彩大奖无人领| www.375771.com-彩票走势图排列五| www.456591.com-彩易达科技有限公司| www.535369.com-0到9的彩票是什么| www.631253.com-足彩19034分析| www.69179.com-在淘宝买彩票怎么买| www.616335.com-足彩3串3奖金算法| www.963249.com-澳客彩票网14场| www.3389.org-苏宁彩票怎么办理| www.9395.biz-彩票号码冷热周期| www.6342.vip-河南福彩大厦地址| www.017244.com-盛大彩票投注平台| www.133469.com-福中彩票下载安装| www.221930.com-七星彩开奖记录| www.066999.com-十大信誉私彩平台| www.052667.com-中国足球彩票下载| www.298356.com-快三最大奖金是多少| www.059764.com-微信拉人玩彩票套路| www.153453.com-七乐彩玩法投注| www.930169.com-518彩票注册| www.cai3166.com全国快三下载安装| www.d52.com-123彩票网络平台| www.713.date-时时彩如何平投追号| www.788988.com-足球彩票圈怎么进| www.312555.com-快购彩票3最新地址| www.dk.com-北京快三一定牛m| www.126375.cc-彩票105期3d| www.505713.com-彩票能转职吗| www.13or.com-幸运彩票的网址| www.247335.com-彩富网香港官方| www.984153.com-福彩试机号码| www.72qs.com-彩票机图片扑克娱乐| www.332035.com-快三推荐码-| www.597149.com-福彩3d五福图库| www.775231.com-阿里彩票登录| www.164264.com-nba体彩赔率| www.440044.com-银行监守自盗买彩票| www.798827.com-福彩快3每天几期| www.707022.com-辽宁全运彩走势| www.jq04.com-分分彩输了十万| www.976349.com-最近河南彩票中奖| www.lb08.com-天天中奖彩票下载| www.1qa.cc-河南体彩兑奖流程| www.95eo.com-体彩排列3报纸图片| www.fw54.com-旺彩电脑版-| www.628428.com-中国福利彩票扫一扫| www.966897.com-吉林快三群95群| www.513501.com-三分重庆时时彩计划| www.97052.com-辽宁福彩手机| www.721201.com-如何破解网络彩票| www.7815.biz-竞彩心得不能买让球| www.59176.com-祥瑞彩云彩票| www.030053.com-彩虹屁语录-| www.120861.com-专业彩吧助手走势图| www.sd5.cc-快三上海快三开奖号| www.756637.com-盛兴彩票v1登录| www.812076.com-乐彩论坛大乐透预测| www.879528.com-多彩网是真的吗| www.943337.com-博众时时彩软件好吗| www.984833.com-彩8彩票c85-| www.de4.com-玩快三有赢钱的吗| www.679503.com-齐齐彩票-| www.780052.com-福彩③d-| www.893298.com-安装彩票大师| www.957481.com-248彩票平台| www.995228.com-足彩冷热指数负值| www.fq1.cc-时时彩卡时间漏洞| www.570288.com-七彩虹主板华硕主板|