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.674185.com-彩票带打群-| www.829103.com-九彩网站app| www.954534.com-多盈彩票苹果版| www.al40.com-广西体彩11选5| www.951993.com-彩神争霸8官网| www.498522.com-福彩快三是骗人的吗| www.707067.com-大发快三真实吗| www.95ig.com-投彩绝巧-| www.44649.com-佰胜彩票-| www.252796.com-三d彩票走势图| www.695139.com-福彩公益诗字谜| www.856856.com-领航团队abc彩票| 500彩票www.50052vip.com| www.ne56.com-999金巴黎彩票| www.675234.com-2019竞彩新-| www.u96.net-宁德体育彩票转让| www.073709.com-买彩票都是穷人知乎| www.187018.com-一分彩杀一码| www.040130.com-华夏彩票登录地址| www.ro80.com-湖北快三怎么追豹子| www.058456.com-彩界联盟登录| www.195329.com-快快三走势图| www.y75.com-福彩刮刮乐中奖破解| www.17gu.com-彩鸾归令平仄格律| www.676.in-跟时时彩计划反买| www.4835.xyz-2002世界杯彩票| www.819987.com-买彩票能赚大钱吗| www.939016.com-大发快三作弊软件| www.cai3600.com湖北快三开奖走势图| www.yu87.com-神圣彩票下载| www.21da.com-彩久极速pk10| www.7212.cc-网上购买黑彩犯法吗| www.038589.com-时时彩后三缩水| www.803434.com-高频彩套利陷阱| www.946830.com-彩钢围挡压瓦机| www.ac26.com-黑龙江彩票十一选五| www.03mf.com-快三加奖结束了吗| www.982.red-七星彩中了五个数字| www.1361.vip-3d彩票网彩手机版| www.501856.com-开彩365上市股价| www.134894.com-玩时时彩送彩金| www.43330.cc-福彩三d独胆毒胆| 大赢家彩票www.530751.com| www.611435.com-靠玩彩票赚钱| www.195166.com-买彩票规则-| www.299028.com-中福彩票登录| www.409940.com-鸿运彩票是真的吗| www.217975.com-彩票今天开奖吗| www.07666.com-500彩下载手机版| www.119517.com-彩票标语广告| www.95ty.com-快三春节开奖吗| www.822754.com-体育彩票客户端下载| www.9281.date-彩93k官方网址| www.4590.cc-如何到彩票站买彩票| www.17427.cc-足彩比分预测技巧| www.246868.com-福彩快3助手下载| www.31js.com-昨天福彩开什么| www.006341.com-河北快三311遗漏| www.123561.com-下彩网怎么进不去| www.79gc.com-3d牛彩网图迷九| www.840881.com-彩妆店加盟条件| www.956261.com-网络彩票输钱怎么办| www.305345.com-彩票35期预测| www.397480.com-天津休彩十一选五| www.211465.com-湖北快三号-| www.332365.cc-快乐彩输的倾家荡产| www.452212.com-云南福彩20选八| www.887341.com-网络彩票算赌博吗| www.954526.com-雅彩彩票信誉好吗| www.327672.com-天天彩票软件骗局| www.470095.com-唯彩会ios-| www.565961.com-梦见买彩票没中| www.666939.com-体彩超级大乐透| www.764346.com-乐猫彩票合法吗| www.06547.com-乐彩论坛静态手机版| www.68181.com-手机彩票大发| www.080258.com-各地区快三开奖| www.964876.com-海南福利彩票中心| www.803673.com-手机购买体彩大乐透| www.901145.com-彩票收益分析数学| www.981864.com-七星彩随机选号码| www.44bq.com-非常出彩的意思| www.590458.com-排列三胆南方双彩网| www.32176.com-306彩票网站| www.fv19.com-投资福彩快三违法吗| www.696621.com-鸿运彩票跟投怎么样| www.780698.com-哪个平台打快三好| www.44688.cc-中彩网信誉-| www.036707.com-快乐彩五行排除法| www.v41.pw-玄武彩票9212| www.766923.com-大块发3彩票| www.982540.com-福彩中头奖的生肖| www.sx30.com-1分彩输了好多| www.560223.com-福彩3d今晚预测| www.624297.com-乐彩网33-| www.688287.com-广东福彩投注平台| www.793656.com-中奖彩票赌光| www.881705.com-投彩骗局-| www.969839.com-快乐双彩历史开奖| 凤凰彩票www.88266y.com| www.813422.com-3d之家彩票预测网| www.89rm.com-老郑个人展示竞彩| www.083756.com-彩票和赌博的区别| www.220271.com-什么是炫彩彩票| www.358433.com-体彩数字是什么号码| www.782338.com-乐彩彩票是正规的吗| www.ks59.com-快三守号翻倍公式| www.92el.com-平台计划师带你玩彩| www.5588.space-彩票双色球开奖日期| www.954706.com-快三预警软件| www.310944.com-惠民彩票计划群| www.42218.com-买一张彩票多少钱| www.64050.com-足彩任九缩水软件| www.003695.com-足彩大赢家任选九| www.064062.com-足彩串关奖金计算| www.126768.com-新万彩吧彩票| www.190506.com-河北快三跨度表| www.578497.com-开心8时时彩| 乐发彩票www.461.cc| www.841655.com-谁有重庆时时彩群| www.206775.com-彩票被骗资金追回| www.963420.com-500彩票网pc板| www.62gq.com-彩票3b开奖号码| www.1367.cm-海南举报私彩| www.y89.xyz-彩漫福利本子库| www.332658.com-浙江省快乐彩票| www.967363.com-彩票群怎么找| www.fs00.com-玩福彩快三技巧| www.440949.com-500彩计划助手| www.233464.com-众彩彩票首页| www.635767.cc-上海溢彩年华衣柜| www.80654.cc-足彩竞猜骗局| www.039098.com-天天时时彩助手最新| www.249.biz-品牌彩妆排行榜| www.836240.com-九龙中彩资料大全| www.906058.com-安徽快三一天是多少| 8号彩票www.81520q.com| www.v86.vip-福彩中心领奖安全吗| www.460404.com-凤凰彩票怎样能赢钱| www.590738.com-怎么看七星彩的规律| www.706970.com-微信上能买彩票么| www.888075.com-喜彩网-| www.034437.com-博彩源码修复教程| www.959596.com-甘肃快三技巧| www.ae07.com-牛蛙彩票香港正版| www.140446.com-开心七星彩论坛| www.23tt.com-3d家彩论坛杀号| www.211613.com-广西快三每期多久开| www.390955.com-久盈彩票-| www.502725.com-私彩开奖-| www.278949.com-财神彩票下载| www.an6.com-河北快三跨度和值表| www.105621.com-今天的晚晚好彩图片| www.769129.com-3d彩票开奖时间表| www.967666.cc-彩票网计划群| www.ot74.com-福彩17500首页| www.488.net-彩票中奖喜报| www.6910.net-七彩影院没有网络| www.32944.com-体彩7数走图| www.316051.com-体彩店能买竞彩吗| www.73412.com-牛彩藏机图字谜| www.050406.com-福彩勇士争先玩法| www.81250.com-福彩3d金字塔| www.19qk.com-西安福彩快乐十分|