利用JS hash制作單頁Web應(yīng)用的方法詳解

/** JS方式 **/
location.hash = 'hash'; //設(shè)置hash，該代碼執(zhí)行后URL后面增加“#hash”字符串
console.log(location.hash); //獲取hash

/** HTML方式 **/
<a href="#hash" rel="external nofollow" >點(diǎn)擊改變hash</a> <!-- 點(diǎn)擊后URL后面增加“#hash”字符串 -->

<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>

.page{ display: none; /* 其他樣式省略 */}
.page.cur{ display: block;}
/* 其他樣式省略 */

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 () { //點(diǎn)擊nav中的li，改變hash值
    location.hash = 'page' + (i+1);
   }
  })(i);
 }
 location.hash = 'page1'; //每次頁面重新加載時(shí)都回到page1
 window.onhashchange = function (e) { 
  //當(dāng)hash變化時(shí)，執(zhí)行hashchange事件，該事件具有oldURL和newURL兩個(gè)事件屬性，分別代表前一個(gè)URL和目前的URL
  var oldHash = e.oldURL.split('#')[1]; //取得前一個(gè)hash
  var newHash = e.newURL.split('#')[1]; //取得當(dāng)前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove('cur'); //隱藏前一個(gè)page
  newPage.classList.add('cur');  //顯示當(dāng)前page
 };
}

/**** 前面代碼省略 ****/
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;
};