溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于利用JS hash制作單頁Web應用的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
一、何為hash
這里要講的hash（也叫哈希），指的是JS中location對象的hash屬性，它返回的是URL中#后所跟的零個或多個字符。通常，我們可以通過location.hash的方式獲取哈希值或設置哈希值。當然，我們也可以通過設置a標簽的href屬性來設置哈希值，當用戶點擊該a標簽時即可改變頁面的哈希值。
例如：
/** JS方式 **/ location.hash = 'hash'; //設置hash，該代碼執行后URL后面增加“#hash”字符串 console.log(location.hash); //獲取hash
/** HTML方式 **/ <a href="#hash" rel="external nofollow" >點擊改變hash</a> <!-- 點擊后URL后面增加“#hash”字符串 -->
值得注意的是，無論以何種方式改變哈希值，頁面都不會刷新。
二、hash有何用處
1. 設置錨鏈接
通過設置錨鏈接（即為上述HTML方式），可使點擊鏈接后頁面根據元素id滑動到指定位置，即使頁面跳轉后也不例外。
2. 實現單頁應用的制作
可以根據哈希值的變化來使相應元素顯示或者隱藏，從而實現頁面無刷新的單頁切換。
三、何為單頁Web應用
單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。
以上是百度百科對單頁應用（SPA）的解釋，而使用hash可以非常方便的實現“頁面”間的切換。
四、如何使用hash制作SPA
簡單來說，就是先只顯示第一個page，然后通過改變hash值來切換顯示不同的page，前一個page隱藏。
這里寫個簡單的Demo演示一下吧：
1. 首先寫好HTML結構
<article class="container"> <section id="page1" class="page cur">第一頁</section> <section id="page2" class="page">第二頁</section> <section id="page3" class="page">第三頁</section> </article> <nav id="nav" class="bottom-nav"> <ul> <li>第一頁</li> <li>第二頁</li> <li>第三頁</li> </ul> </nav>
2. 然后為其設置CSS樣式
.page{ display: none; /* 其他樣式省略 */}
.page.cur{ display: block;}
/* 其他樣式省略 */
3. 編寫Javascript，實現單頁切換
window.onload = function () {
var nav = document.getElementById('nav');
var navLi = nav.getElementsByTagName('li');
for(var i = 0,len = navLi.length; i < len; i++){
(function (i) {
navLi[i].onclick = function () { //點擊nav中的li，改變hash值
location.hash = 'page' + (i+1);
}
})(i);
}
location.hash = 'page1'; //每次頁面重新加載時都回到page1
window.onhashchange = function (e) {
//當hash變化時，執行hashchange事件，該事件具有oldURL和newURL兩個事件屬性，分別代表前一個URL和目前的URL
var oldHash = e.oldURL.split('#')[1]; //取得前一個hash
var newHash = e.newURL.split('#')[1]; //取得當前hash
var oldPage = document.getElementById(oldHash);
var newPage = document.getElementById(newHash);
oldPage.classList.remove('cur'); //隱藏前一個page
newPage.classList.add('cur'); //顯示當前page
};
}
這里有幾個地方需要注意的是，IE并不兼容oldURL和newURL這兩個屬性，所以該方法有一定的局限性。當然，更好的方法是，一開始將hash值用變量存起來作為oldHash，具體方法如下：
/**** 前面代碼省略 ****/
location.hash = 'page1';
var oldHash = location.hash;
window.onhashchange = function (e) {
var newHash = location.hash;
var oldPage = document.querySelector(oldHash);
var newPage = document.querySelector(newHash);
oldPage.classList.remove('cur');
newPage.classList.add('cur');
oldHash = newHash;
};
這里還有一個地方需要注意，就是classList在IE9及其以下瀏覽器不兼容，最好通過處理className屬性的方式來實現相同的效果，此處便不再詳述。
總結
以上就是這篇文章的全部內容了，當然，hash的作用或許遠不止這些，以后如有遇到再同大家一起分享。希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
