jquery 实现手风琴滑块文字列表切换特效代码布局， js css 分离，结构简单清晰， 下载即可使用。
使用方法：
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>
