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>
