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.362594.com-彩票最新改革方案| www.fe22.com-广东体育彩票| www.56ak.com-彩之源是真还是假| www.008229.com-购彩计划软件下载| www.317575.com-竞彩心得-| www.453302.com-百乐门彩票平台| www.560659.com-澳洲三分彩开奖查询| www.657913.com-利博彩票最新| www.791795.com-福彩手机怎么兑奖| www.b29.cn-高频彩票调整后销售| www.54ov.com-中国移动彩票网址| www.1142.in-熊猫竞彩下载| www.754933.com-彩票双色球几点开奖| www.032018.com-天天爱彩票下载安装| www.275383.com-彩01彩票下载安装| www.372272.com-福彩3+地试机号| www.536797.com-发行福利彩票的目的| www.333239.com-中彩网客户端| www.444362.com-台湾福彩星-| www.618728.com-明天开什么福利彩票| www.718135.com-苹果版彩库宝典| www.823772.com-360彩票不能用了| www.932308.com-怎么玩七星彩三字定| 博友彩www.371f.cc| www.vu47.com-彩票k线的制作方法| www.363385.com-彩虹是什么-| www.449698.com-足彩竞彩十四场| www.240.cm-重庆时时彩五分| www.8816.date-亚博科技彩票| www.51215.com-牛彩app真的吗| www.33au.com-三分彩计划群| www.046277.com-天天彩怎么下载| www.9278.xyz-500彩足彩-| www.01mu.com-鸲力七星彩-| www.365161.cc-足彩投资宝典电子书| www.55lh.com-河北体彩大玩法| www.564889.com-申请竞彩店的要求| www.764043.com-3d彩票图库-| www.950692.com-时时彩软件大全| www.yf7.com-大乐透彩票规则| www.d53.top-彩票ai软件-| www.62qw.com-福利彩快乐十分奖金| www.868917.com-深圳快乐彩不可信| www.132011.com-河南濮阳订婚彩礼| www.0497.cc-内蒙古福彩彩种| www.8210.cn-北京彩票中心| www.837029.com-7070彩票登录| www.993528.com-足彩保本玩法| www.65if.com-6538彩票-| www.6412.org-口碑最好的彩票平台| www.91777.cc-顺丰彩票中奖率高吗| www.cai5454.com内蒙古快三遗漏数据| www.501195.com-韩国快三计划图| www.577977.com-天中图库好运彩一一| www.639994.com-麦久彩票网试机号| www.717221.cc-彩铅对孩子的好处| www.792664.com-福彩人工电话号码| www.869032.com-11选5彩票牛人| www.928444.com-湖北宜昌快三| www.983238.com-福利彩票双色球领奖| www.cp7788.com-网赌分分快三害死人| www.975866.com-够力七星彩画板| www.cp8038.com-手机快三投注合法吗| www.my70.com-彩票店碰到赊账的| www.200.me-儿彩铅画图片大全集| www.670578.com-和彩票有关的名字| www.773826.com-皇冠nba博彩| www.854531.com-下载体彩天下| www.511114.com-遇到彩虹是那首歌| www.674446.com-79彩票登入平台| www.831103.com-广州彩钢板-| www.906512.com-吉林快三网络盘代理| www.985342.com-体彩扑克牌开奖结果| www.ke94.com-福利彩票中奖查询| www.q29.com-快三豹子号周期| www.64cu.com-七星彩票论坛808| www.087026.com-福运彩票官网| www.179066.com-快三有人控制吗| www.251210.com-彩8彩票安卓| www.325662.com-今晚七星彩开| www.130114.com-055hcc福彩-| www.203051.com-优游彩票平台下载| www.301824.com-海南七星彩现场直播| www.226130.com-南方双彩-| www.yq62.com-体彩七位数这么买| www.867294.com-快三挂机稳赚| www.949013.com-中彩快三有什么阴谋| www.kr5.com-内蒙古时时彩走势| www.6ul.com-体育彩票怎么开| www.1980.wang-盐城建湖万彩国际| www.022507.com-彩票大神跟单靠谱吗| www.126497.com-乐彩网3d字谜专区| www.217908.com-时时彩开奖结果内蒙| www.ta97.com-霸气十足的彩票网名| 中国福利彩票www.34788y.com| www.071308.com-足彩培训师闫勇| www.862286.cc-体彩排列7开奖| www.068506.com-彩票gg官网下载| www.jl69.com-买彩票快3犯法吗| www.99376.com-买足彩哪个网站好| www.298011.com-人人彩票怎么玩| www.497792.com-13国际彩票-| www.363413.com-儿童重彩画-| www.853495.com-海南私彩几点开奖| www.796229.com-足彩竞彩9场胜负彩| www.167962.com-北京快三网站| www.789175.com-皇冠竞彩平台| www.xi06.com-好彩网3d图谜| www.786221.com-天天娱乐购彩平台| www.887627.com-昨天体彩票开奖号码| www.970146.com-威力彩開獎-| 皮皮彩www.569680.com| www.nv24.com-中国体彩网电脑版| www.398522.com-七星彩每周几次开奖| www.817297.com-ig传统彩合法吗| www.952457.com-广东福利彩票好彩2| www.hv28.com-彩乐汇广西快三| www.338369.com-彩分兑换大乐透| 金掌柜www.83993j.com| www.616326.com-微信小程序体育彩票| www.cai3244.com发彩大厅-| www.64ef.com-彩王艾先生最后结局| www.636331.com-彩虹织机教程冰淇淋| www.32258.com-福彩二十选五推荐号| www.121284.com-彩票交流微信群名字| www.387018.com-大发快三中奖截屏| www.117184.com-体彩app有哪些| www.943942.com-体育彩票机选中奖| www.47774.com-陕西体彩中心在哪| www.114266.com-湖兆省快三开奖查询| www.028032.com-有彩票职业玩家吗| www.204655.com-江西体彩中心电话| www.yu36.com-美国彩票销售额| www.5518.top-飞跃彩虹韩剧| www.645898.com-竞彩总进球数高手| www.731850.com-8k彩票是正规的吗| www.963979.com-彩票双色球红号分析| www.3644.cm-彩票为职业-| www.62808.com-神马彩票papay| www.978581.com-极速快三彩票系统| www.6865.vip-盈宝彩-| www.284410.com-时时彩输光了怎么办| www.9565.loan-风采还是风彩| www.1jt.com-凤凰彩票3-| www.63171.cc-彩宝彩票安全吗| www.3174.win-丹麦足球竞彩网| www.204108.com-内蒙古福彩下载安装| www.383330.com-七星彩第19028| www.6443.vip-中国彩票玩法| www.522483.com-56时时彩计划| www.611332.com-彩票信息网-| www.04424.com-体彩扫码投注| www.384909.com-腾讯彩票网站| www.572877.com-彩票有几种购买方式| www.727688.com-福彩中奖号码近期| www.921645.com-彩票找规律万能公式| www.as2.com-快三赌博大小单双| www.n32.cc-爱乐透彩票-| www.ne70.com-购彩网下载-| www.4796.com-彩进是不是黑平台| www.0831.date-易彩手机更新版本| www.98626.cc-香港福利彩票预测| www.576573.com-福彩3d专家杀号准| www.763896.com-快三开的什么号码|