課程範例:Happy School

利用jQuery中Load事件,取代DW範本執行

S1:將在Soure資料夾中layout.html複製貼入網站至index.html

S2:在#nav li 外部載入檔案,利用jQuery中的【data-*】 加入(如下圖)

<ul id="nav">
	<li data-file="about">關於我們</li>
	<li data-file="news">最新消息</li>
	<li data-file="service">資源服務</li>
	<li data-file="map">交通資訊</li>
</ul>

S3:JavaScript library 載入,並寫入script程式

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$('#content').load('htmlpage/about.html');

	$('#nav li').click(function(){
		var $page = $(this).data('file');
		$('#content').load('htmlpage/'+$page+'.html');
});
</script>

S4:針對按鈕區,利用加入【.active】美化

#nav li.active{ background-position: -43px -200px; color: #770002;}
#nav li.active:hover{ background-position: -43px -300px;}

 

$('#content').load('htmlpage/about.html');
$('#nav li').click(function(){
	var $page = $(this).data('file');
	$('#content').load('htmlpage/'+$page+'.html');
	$(this).addClass('active').siblings().removeClass('active');		//新增
});

S5:最新消息區,隨著不同頁面而不同

新增news.txt

最新消息456最新消息456最新消息456最新消息456


<div id="about">
about(關於我們):最新消息123最新消息123最新消息123最新消息123
</div>

<div id="map">
map(交通資訊):最新消息123最新消息123最新消息123最新消息123
</div>

<div id="news">
news(最新消息):最新消息123最新消息123最新消息123最新消息123
</div>

<div id="service">
service(資源服務):最新消息123最新消息123最新消息123最新消息123
</div>

S6:加入jQuery語法

$('#content').load('htmlpage/about.html');
$('#pagenews p').load('news.txt #about');	//新增
$('#nav li').click(function(){
	var $page = $(this).data('file');
	$('#content').load('htmlpage/'+$page+'.html');
	$('#pagenews p').load('news.txt #'+ $page);		//新增
	$(this).addClass('active').siblings().removeClass('active');
});