Web►Overall

[Web] 一頁式網站

前言

網站可以利用多個HTML檔切換，也可以利用#來達到一頁式的網站，一頁式的網站載入時間會因為檔案大較久，但載入完畢後切換頁面則不需要再載入，另外若有資料必須在多個頁面使用也不需要傳遞。

切換

利用CSS的display:none，使用jQuery則可以使用show()和hide()。

#

加上location.href="#xxx"則可以在網址加上#和值，可以用來標示不同的頁面，而上一頁下一頁也會有作用。

onhashchange

單純這樣子會使瀏覽器的上一頁和下一頁無作用，僅造成網址的改變，因此要加入事件偵測，再取得當前的頁面做不同的事件即可。

1
2
3
4
5
6
7
window.onhashchange = function(){
	alert(window.location.hash.slice(1)); //取得tag後的value
}
// or jQuery
$(window).on('hashchange', function() {
	alert(window.location.hash.slice(1));
});

返回首頁

若不希望可以直接進入子頁面，除了做事件偵測外還要改網址。

1
2
3
if ( window.location.hash ){
	window.location.href = "" ;
}