标签：
传统的网站，页面跳转通常是通过多个html页面实现的。但是这样用户体验不是很好，如果使用一站式，网站内容都在一个html页面上，会大大提高用户体验，而且是网站更快更流畅。
为了能实现一站式的效果，我主要用了html5和hash值的相关内容，兼容高版本的浏览器，下面是一个小列子：
首先，在html页面中添加ul标签，来模拟页面的菜单
<ul> <li><a href="javascript:;" data-hash="index">首页</a></li> <li><a href="javascript:;" data-hash="disc">人物简介</a></li> <li><a href="javascript:;" data-hash="thing">生平事迹</a></li> </ul>
在a标签中，我用了html5中的自定义属性，命名为data-hash，这里的每一项都对应着相应的内容，通过点击每一项，相应的内容就会显示出来，因为上面的是菜单，所以还需要具体页面内容。
我用了三个div来作为内容包裹的容器
<div data-hash="index">我是首页的内容，我简短精悍但十分重要</div> <div data-hash="disc">我是人物的简介</div> <div data-hash="thing">这一生就是无数传奇的集合</div>
这三个div标签都添加data-hash的属性，属性值与上面菜单一一对应，通过这个设置，就可以让菜单项与页面显示内容对应起来了。
ps：页面的css代码很简单，就不列出来了，无非就是让li左浮动，然后给div清除浮动以及设置display为none。
然后javascript代码部分，我的具体思路是：先获取页面的a元素以及div元素，再通过循环，来获取a元素的点击事件，在事件处理函数中，我需要获得当前点击元素的data-hash值，然后将这个hash值覆给当前的url，接下来，再写一个循环，用来比较当前的hash值与哪个div的hash相等，若找到相应的元素，就应该把该元素的display属性设置为block，为了让之后的每一次点击都只有需要的那部分内容显示，还需要在循环中让所有的div都隐藏后再来寻找相应元素。
菜单部分的功能基本实现，但为了能让url与下面的内容对应起来，也就是在url中改变hash值，会出现对应页面，我在javascript文件中又添加了一部分代码，先要获得当前的location的hash，再通过字符串截取的方法获得hash值（没有#），再去和div的data-hash的值进行对比，找到相应的div并把它显示出来。
为了解决使用hash后页面不刷新的问题，我是用了onhashchange事件句柄，让hash值改变了，页面就重新加载，实现刷新。
详细代码如下：
window.onload = function(){ var oA = document.getElementsByTagName("a"); var oDiv = document.getElementsByTagName("div"); var aL = oA.length; var dL = oDiv.length; for(var i = 0;i<aL;i++){ oA[i].onclick = function(){ var hash = this.dataset.hash; window.location.hash = hash; for(var i = 0;i<dL;i++){ oDiv[i].style.display = "none"; if(hash === oDiv[i].dataset.hash){ oDiv[i].style.display = "block"; } } } } window.onhashchange = function(){ window.location.reload(); } var headHash = window.location.hash.substring(1)||"index"; for(var i = 0;i<dL;i++){ if(headHash === oDiv[i].dataset.hash){ oDiv[i].style.display = "block"; } } }
标签：
原文地址：http://www.cnblogs.com/zhangtaiqingqing/p/5686744.html
