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.4444.in-精华布衣1多彩网图| www.595604.com-那个鑫彩网怎么举报| www.682508.com-公益时报中华彩讯| www.062447.com-全民中彩票快三| www.333393.com-分分彩-| www.2816.cc-彩票中奖宁波| www.37319.cc-俄罗斯彩蛋多少钱| www.157188.com-易彩堂犯法吗| www.fn03.com-竞彩足球赛-| www.04tz.com-彩铅临摹世界名画| www.071959.com-彩票店怎么加盟电话| www.535779.com-体彩七位数随机号| www.890187.com-cba彩票在哪买的| www.966293.com-即开彩app官网| www.037953.com-778彩票网app| www.64466.cc-竞彩app推荐| www.14rx.com-七星彩局王长条图纸| www.604893.com-彩澳彩票平台怎么样| www.026198.com-代玩彩票兼职招聘| 幸运彩票www.937299.com| www.443759.com-七星彩中奖专业户| www.306291.com-澳发彩票平台| www.397949.com-七星彩那几天有| www.822915.com-粉百合彩吧3d字谜| www.7510.loan-周边彩票店-| www.956797.com-小猪彩泥手工| www.pa3.cc-买彩票怎样选号码| www.527087.com-时时彩对子-| www.7727.top-趣彩彩票是真的假的| www.87vh.com-腾讯十分彩开奖助手| www.377139.com-因为彩礼钱分手微信| www.579217.com-天下彩现场开??| www.778711.com-11选5多乐彩开奖| www.870622.com-买彩网app-| www.944538.com-聚财彩票-| www.993915.com-下载玩彩票-| www.dq83.com-彩神v8-| www.954865.com-胜负足彩比分| www.8415.vip-乐彩骗人套路| www.303787.com-鑫彩国际彩票| www.516716.com-色彩闻一多-| www.668350.com-3d彩票定时器| www.871232.com-邪恶帝之三国全彩| www.964826.com-吉祥彩票注册网址| www.cp6672.com-河南福彩快三开奖图| www.825291.com-七星彩走势规律图表| www.947710.com-多彩贵州经济| www.dl75.com-体彩大乐透玩法介绍| www.058923.com-彩票中一等奖怎么领| www.814500.com-听吉林快三-| www.898935.com-大信彩票彩神争霸| www.974935.com-易彩合法吗-| www.xj54.cc-好彩妹资料网| www.906702.com-中国足球体彩官方网| www.984341.com-体彩彩票助手手机版| www.cp11.com-公益福彩-| www.872060.com-六盘水彩票中奖情况| www.967826.com-百合网让你买彩票| www.cai111.com-兰州快三-| www.41999.com-买彩票输了8万| www.853382.com-体育彩票春节停售| www.530641.cc-乐彩客网址导航| www.731065.com-梦想彩彩票-| www.815994.com-3d彩报布衣电子报| www.908855.com-极速快三走势图| www.if64.com-合法的网上彩票| www.00fe.com-描写雨后彩虹的诗句| www.158240.com-福彩pk拾项目| www.490979.com-淘宝为什么不买彩票| www.28pa.com-乐彩娱乐注册| www.0754.online福彩门户免全| www.4503.me-竞彩任选九场| www.957445.com-红牛彩票网站靠谱吗| 万彩网www.wcp666888.com| www.740052.com-奥门彩票网-| www.845001.com-o1彩票北京pk拾| www.910074.com-3d银海彩票-| www.971394.com-体彩开奖j结果| 99彩www.996763.com| www.ng61.com-网上福利快三| www.sp35.com-610彩票官网| www.so9.com-江西福利彩票官网| www.4ma.com-昆山福彩快3| www.958760.com-体彩藏机图-| www.72870.com-甘肃快三小贴士| www.05284.com-致富彩票是干嘛的| www.52515.cc-好彩网0567-| www.92329.com-彩票系统破解方法| www.579104.com-福彩怎么样算中奖| www.58np.com-彩宝吉林快三| www.526941.com-体育彩票开桨结果| www.621863.com-宁波彩票-| www.680925.com-七星彩是诈骗| www.755535.com-天天好彩彩票| www.814047.com-网络彩票导师微信| www.876669.cc-重庆时彩助手软件| www.933915.com-今日彩票官网首页| www.980461.com-中国的彩票有多坑| www.cp2606.com-江苏快三中奖多少钱| www.875177.com-澳门时时彩是骗局吗| www.554680.com-江苏快三微信导师| www.632822.com-足彩一注2元赢多少| www.704158.com-安教快三-| www.780658.com-彩铅画教程动漫| www.303055.com-采票开奖查询彩票| www.382957.com-最正规彩票在哪买| www.176389.com-福彩网快三平台| www.939589.com-福彩网押大小是真假| www.iu35.com-体育福彩开奖| www.956132.com-彩影抠图-| www.919208.com-正规时时彩-| www.023636.com-r8彩票是什么| www.025435.com-银川仟彩摸吧视频| www.109360.com-香港老彩民高手| www.633980.com-彩盈娱乐手机版| www.951625.com-网易体育彩票| www.411946.com-农村院子彩钢棚图片| www.692664.com-趣彩彩票手机购彩| www.993319.com-足彩论坛-| www.188611.com-快乐彩稳赢-| www.558649.com-快三豹子号中多少钱| www.653700.com-吉林快三合值表| www.954538.com-牛蛙彩图-| www.lq65.com-中彩网首页图表| www.13yq.com-体彩直播间-| www.787279.com-江苏快三真假| www.20rk.com-体彩3月16日开奖| www.2244.tv-十一选五大彩鲸开奖| www.135059.com-五彩缤纷香烟多少钱| www.392791.com-体彩有几种投注方式| www.623902.com-33cc彩票网下载| www.752907.com-体育彩票几点停售| www.cp5499.com-北京福彩网pk10| www.07052.com-工行彩票-| www.91892.com-国内彩票大奖排行| www.210087.com-最全的彩票开奖网站| www.311871.com-红牛彩票的真假| www.383129.com-天天赢彩票真假| www.195617.com-福彩三d开奖| www.27po.com-8号彩票软件下载| www.9690.biz-如何分析彩票的销量| www.6360.net-红牛彩票网站| www.29677.cc-幸运彩票网站可靠吗| www.35657.cc-成功彩票平台| www.983149.com-下载竟彩足球| www.028820.com-甘肃福彩开奖信息| www.179770.com-七星彩玩法中奖规则| www.10557.com-湖北快三高频彩票网| www.xi09.com-7彩国际是不是假的| www.639420.com-福彩竞彩篮球规则| www.856394.com-海南七星彩预测软件| www.rg10.com-彩种最全的彩票软件| www.097293.com-福彩公益慈善俱乐部| www.429499.com-日本彩票规则介绍| www.690111.com-91彩虹-| www.507075.com-彩票分为哪几种| www.cp6543.com-安徽快3爱彩乐| www.986209.com-体彩p3开奖-| www.bf91.com-黑彩平台信誉排名| www.qr14.com-远洋竞猜型理财彩票| www.35663.cc-摩臣彩票官网| www.288267.com-123彩票开奖网站| www.3331.biz-阿衰彩色漫画| www.818742.com-时时彩十码-|