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.974614.com-7星彩下期预测| www.10268.com-凤彩彩票网可以玩吗| www.312706.com-彩票生日选号器| www.435894.com-红河州彩票中心电话| www.917502.com-新粤彩网址-| www.hk71.com-足彩的五种玩法| www.75yv.com-买彩票发现漏洞| www.380012.com-彩九app-| www.500028.cc-最早的彩票怎么设计| www.575751.com-微信下单购竞彩| www.653109.com-福彩3d103码| www.286715.com-安徽快三下期预测| www.008289.com-今晚七乐彩开奖信息| www.134878.com-七天彩票真的假的| www.328000.com-福彩微信公众号| www.416663.com-旋风彩虹机视频| www.522889.com-分分彩怎么算万位数| www.610356.com-怎么玩彩票就赢| www.695851.com-足彩十四场投注| www.796241.com-彩票选号书-| www.893419.com-彩票在线选号工具| www.981003.com-怎样用彩折做冰淇淋| www.ru27.com-网上买彩票哪个网站| www.517235.com-中彩堂网开奖| www.895862.com-内蒙古快三软件| www.689703.com-体彩500万-| www.7779.me-青岛体彩电话| www.008980.com-今天体彩开奖号码是| www.158966.com-博友彩注册-| www.27214.com-彩票代理跟投软件| www.817260.com-彩77中奖提现| www.898412.com-银海彩报-| www.971128.com-乐彩字谜图迷论坛| www.cai3888.com快三绝密公式算单双| www.280072.com-时时彩精选app| www.655584.com-快三猜一个号规则| www.764705.com-彩神通金码关注| www.ja48.com-彩票快乐十分| www.337500.com-天天盈球竞彩大势| www.9512.net-北京体彩最大遗漏| www.438746.com-中彩网组六走势图| www.721098.com-两元彩票网下载| 幸运彩票www.224066.com| www.934117.com-福彩快3网站关闭| www.998006.com-众彩网专家火烈鸟| www.ho38.com-博雅彩票怎么赚钱| www.yv95.com-大发快三豹子神器| www.456477.com-什么彩票送注册金| www.744561.com-弘升彩票-| www.612299.com-小鸡彩虹第二季| www.722800.com-168彩票官方安装| www.836725.com-陕西福彩中心app| www.948599.com-武汉福彩-| 500彩票www.329477.com| www.11uw.com-彩票群为什么会封群| www.355513.com-福彩3d丽人杀码| www.479301.com-竞彩和外围单固对冲| www.573922.com-中信福彩网站| www.025585.com-高频彩追号必死| www.943996.com-佰萬彩票是真的假的| www.er32.com-体彩三天计划独胆| www.12807.com-足球彩票店这么拉人| www.099804.com-中华彩票李迎| www.867393.com-体彩正版天庚图谜| www.7424.cm-足彩网点-| www.d56.club-福彩开奖查询下载| www.723224.com-简易倍投计算器彩票| www.382986.com-报彩资料网-| www.904940.com-竞彩足球彩票开奖| www.992544.com-快乐彩任选五怎么玩| www.hh71.cc-乐彩彩票-| www.587219.com-嘉定机选中奖彩民图| www.706884.com-福利彩票提款| www.803964.com-名人彩票测速网站| www.874984.com-时时分分彩骗人吗| www.940540.com-爱玩彩票-| 环球彩票www.hqcp6.com| www.s45.org-彩票网排列三| www.81499.cc-博彩诈骗怎样报警| www.502231.com-福彩套利-| www.857883.com-国家会取消彩票吗| www.931141.com-色彩画-| www.997737.com-彩票20选8规则| www.dt97.com-天天溢彩-| www.ux42.com-给个q彩邀请码| www.8ly.cc-新彩国际-| www.930464.com-彩票1亿个税| 彩票驿站www.2350i.com| www.dx63.com-网络彩票赌博的危害| www.33399.cc-工地彩钢围挡合同| www.909728.com-东北人风彩-| www.160197.com-海口彩票网早版区| www.246779.com-新浪足球彩票网| www.692980.com-山东彩票软件| www.802522.com-体彩篮球竞彩对阵表| www.877792.com-我想做网络私彩代理| www.956654.com-打彩票打错了的公告| 大赢家彩票网www.178795.com| www.60648.com-什么是非法彩票| www.42pw.com-河内五分彩平台| www.1193.pw-七星彩组合多少注| www.cz24.com-安装588彩票网| www.418062.com-体育彩票七星彩直播| www.536297.com-深圳抱团买福利彩票| www.689001.com-彩友沙龙-| www.778208.com-历史上福彩开奖号码| www.885184.com-谁知道传奇彩票网址| www.966854.com-彩票兑奖规则介绍| www.se9.com-彩票快讯-| www.vj54.com-排列三试机号牛彩网| www.781974.com-东成西就彩票| www.904067.com-江苏省福彩网| www.975606.com-上官燕最新七星彩| www.pq1.cc-韩国彩票网-| www.yu59.com-山东体彩论坛电脑版| www.773943.com-天津体育彩票网站| www.855232.com-体彩主任领走47亿| www.922255.com-彩票365购彩| www.988700.com-全民中彩票ios版| www.nb5.com-分分快三平台下载| www.177138.com-快三所有号码表| www.202777.com-贵阳福彩官方| www.8354.com-优点彩票可靠吗| www.2638.org-时时彩票app苹果| www.4505.hk-今天七星彩号码多少| www.pw.cc-北京快三和值中奖| www.166784.com-快三助手免费版| www.306208.com-彩6精华版网页| www.518318.com-七星彩五行走势图表| www.813314.com-重庆时彩微信下注群| www.907420.com-谁知道快乐彩票网址| www.cai959.com-湖北快三中奖多少钱| www.597704.com-彩票猜谜-| www.733320.com-易彩票是什么彩票| www.825153.com-六彩开奖结果最新| www.949072.com-河南481网上购彩| www.cp1113.com-彩票平台排行榜| www.xh32.com-好彩-| www.48xg.com-大佬彩票公平公正| www.2992.site-福彩会中奖吗| www.531260.com-九五彩票-| www.619019.com-江苏体彩领奖地点| www.18224.com-彩票神人王成周视频| www.51623.cc-手机版时时彩投注网| www.5313.me-龙岗区体彩店转让| www.087991.com-澳客彩票以前版本| www.858668.com-七乐彩最新开奖结果| www.vy39.com-快三稳定心得| www.197995.com-青海福彩-| www.163046.com-大乐透彩民村走势图| www.19gc.com-彩仙阁挂机论坛| www.68564.com-彩票排列三字谜图谜| www.415400.com-uc彩票官方网| www.685220.com-首页1216彩票| www.751977.com-福彩3d怎样定大小| www.802054.com-体彩38期开奖| www.865279.com-彩02彩票官网| www.928272.com-高频彩开奖时间种类| www.971734.com-二分彩属于什么彩| 幸运彩票网www.33598n.com| www.kk63.com-易彩快三下载| www.168686.com-大发快三屠龙是什么| www.45421.com-重庆彩票新闻| www.cai7911.com吉林体彩网11选五|