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.892762.com-彩票摇奖模拟器作假| www.18qo.com-体彩周五开奖| www.0000.pw-5个数的彩票| www.506206.com-8亿彩靠谱吗| www.813544.com-新彩吧图谜字谜汇总| www.190534.com-快三河北开奖| www.314163.com-足球胜负彩对阵表| www.763852.com-有什么好的足彩软件| www.710607.com-彩票稳赢他套现| www.900249.com-陌陌彩票注册送28| www.cp0698.com-一分快三破解器下载| www.945766.com-福建体彩中心| www.ms05.com-网上购彩网哪个好| www.089902.com-新吉林快三昨天| www.705566.cc-彩票扫码投注| www.852692.com-时时彩组六8码漏洞| www.234432.cc-福彩选四奖励规则| www.369322.com-8号彩票论坛马会开| www.950715.com-江苏快三吧-| www.055303.com-吉林快三报盘正规吗| www.176411.com-中国快三大全网官网| www.232679.com-足球彩票分析| www.321330.com-顺盈彩票是合法的吗| www.605659.com-彩膜6splus-| www.668838.com-七星彩抓码规律软件| www.820056.com-彩票中心兑奖给支票| www.916188.com-海南私彩打击庄家| www.821829.com-聚彩彩票赢了能提现| www.956889.com-金利彩票网站| www.ad77.com-彩票36期开奖结果| www.9mc.com-微博钱包里的彩票| www.89tx.com-收到奇怪博彩的短信| www.327695.com-彩票榜下载-| www.922971.com-彩票店开业促销活动| www.984735.com-快3彩票在哪买| www.de03.com-瑞彩祥云网页| www.e38.hk-家彩网关注码| www.0cq.cc-体彩胜负彩中奖故事| www.230368.com-彩店宝彩票官网| www.350502.com-福彩乐选5中奖规则| www.895007.com-做彩票帮投违法吗| www.984631.com-福彩3d小助手下载| www.116518.com-特彩吧下载-| www.025501.com-福彩中心招聘| www.48354.com-极速时时彩前三玩法| www.732697.com-快三和值18计划| www.818014.com-新浪足彩19025| www.922135.com-中国公益彩票| www.984426.com-淘彩赢app下载| www.qe9.cc-乐购28彩票网| www.720.in-彩票分什么彩种| www.7794.pw-梦见一组彩票数字| www.569523.com-西藏福利彩票快3| www.622994.com-梦想彩票网站| www.701505.com-竞彩足球比分中奖| www.798064.com-海南福彩网app| www.874712.com-人人中彩票软件| www.950892.com-福运彩-| 福彩www.15355m.com| www.894524.com-福利彩彩票开奖结果| www.766906.com-鸿运彩票网页版| www.900044.cc-福彩开店有什么要求| 鑫亿彩www.196109.com| www.xr41.com-彩票站买彩票流程| www.211661.com-河北快三奖金是多少| www.069981.com-云南体彩票11选5| www.953603.com-足彩任九投注高手| www.098633.com-福彩在线彩票网| www.867284.com-彩票特区-| www.947880.com-竞猜彩票网-| 福彩www.2109k.com| www.590046.com-dd彩票邀请码| www.752007.com-拾彩下载-| www.894795.com-七星彩奖号码查询| www.cai0777.com河南快三一定牛| 亿发彩票www.802733.com| www.2526.net-东方网彩票平台| www.310771.com-快三甘肃玩法| www.492232.com-体育彩票税钱| www.cv41.com-私彩老平台-| www.977959.com-彩色包装-| www.85fg.com-足彩任选9中奖规则| www.001638.com-官方彩票都有哪些| www.948731.com-福彩的d开奖结果| www.vs09.com-福彩3d吧百度吧| www.3824.online竞彩足球彩客网预测| www.33130.cc-易网易彩票-| www.454464.com-银彩通手机版下载| www.926411.com-体育彩票下载并安装| www.225595.com-福彩贪污案-| www.4070.org-彩虹六号加载太慢| www.883632.com-吉林快三一定牛遗漏| 500彩票www.339968.com| www.949212.com-排列三乐彩网| www.875432.com-有一分钟开的彩票吗| www.32vn.com-彩票中奖视频新闻| www.788012.com-手机qq彩票-| www.885870.com-体彩中心投诉电话| www.cai2789.com1分快3彩票官网| www.954631.com-外国用什么彩票软件| www.cp252.com-大发快三计划免费| www.4732.xyz-亿元彩票网站靠谱吗| www.400494.com-彩票0346下载| www.56uf.com-附近体彩站离多远| www.529889.com-40o500好彩堂| www.099026.com-九州快三下载| www.631005.com-彩运宝客服电话多少| www.983866.cc-快三开奖信息双彩网| www.cd14.com-福彩3d今天的奖号| www.272432.com-快三规律有哪些| www.373081.com-小象体育彩票咋样| www.513189.com-暗地里彩票-| www.594775.com-优乐彩的真假| www.184.tv-简单儿童彩铅画图片| www.970391.com-天天乐彩apk| www.cai08.cc-快三走势图吉林| www.024161.com-福彩3d先锋快报| www.801856.com-高频彩套利原理| www.891266.com-彩票广告语大全| www.957332.com-杏彩平台手机网页版| 快彩在线www.2632c.com| www.wt08.cc-人人中彩票打不开| www.17rt.com-彩票初几开奖| www.59pj.cc-北京福彩彩票| www.576505.com-彩票百度百科| www.643522.com-香港节点彩票| www.698038.com-彩票篮球中奖规则| www.767272.com-快速彩票倍投资金表| www.820758.com-彩钢房顶图片| www.882797.com-福彩就是骗局揭秘| www.951342.com-体彩第19031期| www.61wg.com-足彩直播分析| www.3165.com-强力球彩票玩法| www.017747.com-中福彩票开奖结果| www.168318.com-全国快三是什么意思| 尊彩www.083026.com| www.ml91.com-时时彩app送彩金| www.81vh.com-怎样下载好彩743| www.2065.net-彩虹七号游戏配置| www.317393.com-彩民中奖心得| www.447387.com-吉林快三跨度分析| www.562907.com-彩伞-| www.683895.com-宁夏快三app| www.wh24.com-91彩神福彩快三| www.522004.com-m5彩票手机登录| www.619579.com-中阿彩票app下载| www.717426.com-彩铅画兰花带颜色| www.793043.com-福利彩票中奖领奖| www.869386.com-够力七星彩规律图| www.953411.com-好彩1中奖金额| www.i11.website七星彩走试图带连线| www.55uo.com-电话买彩票-| www.805965.com-凤彩双色球-| www.019241.com-瑞彩祥云平台优化站| www.307598.com-湖南体彩网彩民论坛| www.456073.com-彩虹六号起什么名字| www.545922.com-菏泽福利彩票店转让| www.668254.com-tt彩票账号-| www.751071.com-速赢彩软件下载| www.834888.com-好彩爆珠有什么味| www.908526.com-e8彩票平台网址| www.688831.com-彩票吧软件-| 中国福利彩票www.33588h.com| www.58en.com-彩票店潘攀-|