利用JS hash制作单页Web应用的方法详解(2)
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的作用或许远不止这些,以后如有遇到再同大家一起分享。希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对黑区网络的支持。