jquery實現(xiàn)滑塊文字列表展開切換代碼

jquery 實現(xiàn)手風(fēng)琴滑塊文字列表切換特效代碼布局， js css 分離，結(jié)構(gòu)簡單清晰，下載即可使用。

使用方法：

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">在線教育系統(tǒng) 528項網(wǎng)校功能 讓效率翻三倍</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">視頻彈題，邊學(xué)邊鞏固，讓學(xué)習(xí)更有深度</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">輕松應(yīng)對十萬人在線；多平臺觀看，隨時隨地學(xué)；微信宣傳，一鍵分享</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">真題測評、智能組卷、學(xué)情分析，提高工作效率</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">學(xué)</div>
							<div class="cou-lin"></div>
						</div>
						<div class="homepage-course-list">
							<p>筆記</p>
							<p>問答</p>
							<p>學(xué)習(xí)計劃</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>學(xué)</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">知識共享、內(nèi)容沉淀、知識提煉</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>學(xué)習(xí)計劃</span>
								</div>
								<div class="course-body-item-list-text">系統(tǒng)學(xué)習(xí)，建構(gòu)知識體系，學(xué)習(xí)就像打怪升級</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>學(xué)員管理</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">標簽化管理，知識結(jié)構(gòu)更科學(xué)，讓學(xué)員輕松找到心儀課程</div>
							</div>
							<div class="course-body-item-list">
								<div class="course-body-item-list-title clearfix">
									<i class="icon icon-item008"></i>
									<span>學(xué)員管理</span>
								</div>
								<div class="course-body-item-list-text">輕松應(yīng)對十萬人在線；多平臺觀看，隨時隨地學(xué)；微信宣傳，一鍵分享</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">真題測評、智能組卷、學(xué)情分析，提高工作效率</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">視頻彈題，邊學(xué)邊鞏固，讓學(xué)習(xí)更有深度</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">輕松應(yīng)對十萬人在線；多平臺觀看，隨時隨地學(xué)；微信宣傳，一鍵分享</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">真題測評、智能組卷、學(xué)情分析，提高工作效率</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>學(xué)習(xí)卡</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>學(xué)習(xí)卡</span>
								</div>
								<div class="course-body-item-list-text">視頻彈題，邊學(xué)邊鞏固，讓學(xué)習(xí)更有深度</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">輕松應(yīng)對十萬人在線；多平臺觀看，隨時隨地學(xué)；微信宣傳，一鍵分享</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">真題測評、智能組卷、學(xué)情分析，提高工作效率</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>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

0 12389 74

軟件 Dreamweaver
格式 HTML
作者歪秀
版權(quán) ? 原創(chuàng)商用（獨家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識產(chǎn)權(quán)，如知識產(chǎn)權(quán)權(quán)利人認為平臺內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。