jquery实现滑块文字列表展开切换代码
选项卡|滑动门 次 2018-07-13使用jQuery实现滑块文字列表，轻松切换选项卡内容。通过滑动门效果，展现动态交互体验。简洁代码，高效实现，提升网页交互性，为用户提供流畅的浏览体验。
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>
文件目录
本资源来自：代码 » 选项卡|滑动门 » jquery实现滑块文字列表展开切换代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery大气的图片案例展示tab选项卡切换代码
« 上一篇 2018年08月01日
jquery新闻资讯列表TAB滚动切换代码
下一篇 » 2018年07月05日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
