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.161390.com-北京福利彩票官方网| www.fj23.com-河北福彩双色球开奖| www.70834.com-大众彩票怎么回事| www.925229.com-快三门户网怎么样| www.94466.com-体彩竞彩篮球推荐| www.185056.com-下载彩票软件大全| www.389660.com-c8cn万彩吧6| www.846930.com-三地乐彩网曲线图| www.c24.org-福彩试机号金码| www.7534.top-体彩装修图-| www.181069.com-彩68app下载| www.354219.com-怎么看彩票中奖没| www.535263.com-8位数字彩票| www.696010.com-体彩足球北京单场| www.861901.com-qq彩票竞猜没了| www.983730.com-幸运时时彩骗局| www.mn80.com-白菜网彩金-| www.581136.com-世界杯博彩在哪买| www.3103.org-众发彩票怎样注册| www.399397.com-排列五购彩大厅| www.5780.biz-竞彩复式三串三| www.190.cm-简单的彩铅画画| www.574988.com-彩票网盘出租| www.46lg.com-彩票网赚平台靠谱吗| www.3380.cm-掌中彩封了吗| www.896342.com-鸿彩快三手机下载| www.996664.com-天猫彩票平台| www.ko21.com-足彩预测最准的专家| www.504408.com-幸運快三-| www.590397.com-18k彩金价格| www.683298.com-玩分分彩大小技巧| www.764274.com-红旗彩票怎么投注| www.889475.com-七乐彩中奖是骗局吗| www.958760.com-体彩藏机图-| www.cp61.cc-彩迷网-| www.rc5.com-河北快三预测号| www.we47.com-体彩店装修图片大全| www.307957.com-派彩助手-| www.829372.com-帝王彩票邀请码| www.731336.com-怀城体彩店app| www.865530.com-澳客网、足球彩| www.952290.com-快彩11选5开奖| 吉利彩票www.80075g.com| www.64665.com-竞彩高手打法| www.123757.com-qg刮刮彩-| www.0760.me-易彩log-| www.9622.xyz-国彩官方网站app| www.50244.com-海口彩票七星彩早版| www.98972.com-许昌鄢陵彩礼多少| www.3781.wang-七星彩开奖现在直播| www.085685.com-基诺型彩票是骗局吗| www.248313.com-苹果彩票app下载| www.263967.com-湖北快三带线走势| www.391721.com-购彩直播-| www.593401.com-北京七彩集团董事长| www.670765.com-中国彩票造假事件| www.755948.com-三d彩图-| www.90378.com-77彩票网址-| www.382007.com-五行预测彩票取数| www.206063.com-福彩快三群骗局揭秘| www.5598.pw-玩彩哪个平台最大| www.441258.com-耐磨彩色混凝土做法| www.3785.xyz-彩经网免费双色球预| 易彩堂www.55885i.com| www.kg38.com-银川福彩中心地址| www.399936.com-彩69-| www.567316.com-苹果背部彩膜| www.681301.com-代买彩票-| www.835260.com-好彩1871蓝-| www.979360.com-南通市体彩中心电话| www.tj42.com-玩彩老头3d专栏| www.91pn.cc-千百万彩票网址| www.495465.com-香港六和彩票网站| www.185234.com-彩59app-| www.270311.com-查彩票用哪个软件| www.335773.com-海南私彩三字现| www.595100.com-新的双彩论坛| www.596177.com-买彩票怎么选号生日| www.058588.com-中国福彩彩吧第一版| www.121905.com-马云在彩票站的图片| www.191956.com-五分快三技巧走势图| www.bo14.com-一分快彩app| www.206060.com-13彩软件骗局| www.363875.com-七色彩虹花-| www.780066.com-怎么申请办理彩票站| www.gk64.com-幸运众彩app| www.531911.com-奔驰彩票官网下载| www.54160.com-菲律宾博彩推广| www.967978.com-宁夏新闻彩票中奖| www.vl04.com-私彩快三怎么玩稳赚| www.93ye.com-福利彩票选号区域| www.44142.com-a彩线路-| www.900881.com-彩经网北京快三| www.bp12.com-彩票榜软件-| www.04480.com-微信提现赚钱彩票| www.706965.com-福彩15选5玩法| www.778992.com-体彩排列五中奖地方| www.850733.com-带玩快三-| www.919857.com-模拟彩票打印系统| www.967349.com-10分钟彩票微信群| 中彩网www.71233r.com| www.ch74.com-一分快三点数怎么赢| www.qj57.com-好彩2开奖结果今天| www.qt86.com-甘肃福彩快三的开奖| www.001846.com-各色釉彩大瓶全民| www.x18.top-248彩票可靠吗| www.023724.com-神彩网开奖结果| www.ap26.com-基诺型彩票规律| www.889854.com-98年彩票最大奖| www.661783.com-福彩十二生肖网站| www.281186.com-时时彩二星包胆| www.365477.cc-兰花图片手绘彩铅画| www.249748.com-体彩50元顶呱刮| www.397808.com-智能彩票售彩机器人| www.087778.com-双赢彩票平台登录| www.204075.com-彩迷下载-| www.962395.com-时时彩怎么拉人最快| www.796841.com-足彩任9奖金| www.cp3595.com-网赌快三的幕后黑手| www.104642.com-竟彩开奖结果| www.0578.cc-星彩网怎么样| www.793733.com-中国中彩票最多的人| www.85ci.com-大庆福彩中心电话| www.48pj.cc-三国杀张星彩厉害吗| www.806267.com-彩民村高手之论坛| www.823332.com-涂彩-| www.902563.com-彩票机-| www.968292.com-河南福彩3d申奖号| www.o51.cn-新浪彩票新浪网| www.4334.net-淼鑫彩票app| www.342855.com-吉利3分彩-| www.974853.com-南京体彩-| www.120657.com-体彩兑奖有提成吗| www.690465.com-198彩票注册| www.km74.com-一网彩票开奖结果| www.67ew.com-七乐彩历史开奖查询| www.52278.cc-江苏福彩网官方首页| www.217240.com-彩票指南报纸电子版| www.387451.com-手机彩膜打印机| www.267433.com-足球彩票开奖查询| www.357693.com-博彩老排列三| www.581721.com-天天爱彩票一| www.13018.com-足彩进球数串球规则| www.11qy.com-彩票365两个版本| www.74jh.com-环球彩票怎么样| www.448673.com-大乐透一等奖彩票图| www.fw91.com-彩票交流qq群| www.790964.com-玩快三输了怎样解决| www.902650.com-快三多长时间开奖| 500彩票www.501346.com| www.963124.com-彩钢板房-| www.vx9.com-彩票澳洲5分彩| www.101332.com-足彩预测网站| www.884487.com-福彩试机号走势图彩| www.04.cx-集彩通怎么兑换彩票| www.76gr.com-越南6位数彩票开奖| www.628993.com-俄罗斯彩票中奖号码| www.332513.com-体彩排列3走势图l| www.211586.com-福彩12选5走势图| www.827850.com-彩票跟单陷阱| www.889660.com-新凤凰网彩票官方| www.948477.com-福利彩票那年开始的| www.986764.com-竞彩篮球分析推荐| www.ey03.com-手机时时彩软件大全|