var containers = $('.container'); var links = $('.item'); window.onhashchange = function(e){ var currLink = $('[href="'+ location.hash + '" ]').eq(0); var target = currLink.attr('data-target'); currLink.addClass('active').siblings('a.item').removeClass('active'); $(target).addClass('active').siblings('.page').removeClass('active'); }
实现的逻辑不难，但是利用 hash 总是没有所谓前端路由的那种味，必然也不是主流方法。同样的效果如果需求简单不考虑兼容性的话，利用 css3 中 target 伪类就可以实现，这不是本文的重点，这里就不展开了。
history
作为一种主流方法，我们下面看看 history 如何实现。
history 其实浏览器历史栈的一个借口，去过只有 back(), forward(), 和 go() 方法实现堆栈跳转。到了 HTML5 ， 提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了。而现在的前端路由也是基于这个原理实现的。
这里我们先简单认识一下 history：
go(n) 方法接受一个整数参数， n大于0会发生前进 n 个历史栈页面; n小于0会后退 -n 个历史栈页面；
forward() 前进一个页面
back() 后退一个页面
以上三个方法会静默失败
pushSate(dataObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。这里需要说明的有3点：
当 pushState 执行一个浏览器的 url 会发生变化，而页面不会刷新，只有当触发的前进后退等事件浏览器才会刷新；
这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户。所以当违背同源策略时将会报错;
火狐目前会忽略 title 参数
replaceState(dataObj, title, url) 这个和上一个的区别就在于它不是写入而是替换栈顶记录，其余和 pushState 一模一样
History 还有1个静态只读属性：
History.length：当然历史堆栈长度
还有的都是已经废除的老古董了，这里就不提了
了解了这么多，那么可以研究一下如何利用 history 实现一个前端路由了，这里只考虑 javascript 部分，css 部分和上文一致。这里我们修改部分 html:
<a href="https://www.jb51.net/page1.html" data-target="#index">page1</a> <a href="https://www.jb51.net/page2.html" data-target="#info">page2</a> <a href="https://www.jb51.net/page3.html" data-target="#detail">page3</a> <a href="https://www.jb51.net/page4/subpage1.html" data-target="#show">paga4-1</a> <a href="https://www.jb51.net/page5/subpage2.html" data-target="#contact">paga4-2</a>
我们修改了 a 标签的 href，这样的链接看上去才不是锚点了，不过这个过程我们要处理比较多的工作。首先为了简单一些，我们的这里仅仅对 .html 或没有扩展名结尾的链接设置前端路由：
// 通过委托的方法组织默认事件 var routerRxp = /\.html$|\/[^.]*$|/; $(document).click(function(e){ var href = e.target.getAttribute('href'); if(href && routrRxp.test(href)){ e.preventDefault(); } });
而后我们在点击时把数据写入历史栈，并控制 class 效果：
$(document).click(function(e){ var href = e.target.getAttribute('href'); if(href && routerRxp.test(href)){ var id = e.target.getAttribute('data-target'); history.pushState({targetId: id}, 'History demo', href); $(id).addClass('active').siblings('.page').removeClass('active'); e.preventDefault(); } });
到这里，链接就可以点击了，但是浏览器的前进后退还不能用，我们加入 onpopstate 事件：
$(window).on('popstate',function(e){ var id = e.originalEvent.state.targetId; $(id).addClass('active').siblings('.page').removeClass('active'); });
这样前进后退就可以用了，但是我们发现这样并不能退回主页，因为我们的主页默认就是 page1 标签页，所以没有为主页添加 state，简单处理就让其自己刷新好啦：
var indexPage = location.href; $(window).on('popstate',function(e){ if(location.href === indexPage){ location.reload(); } var id = e.originalEvent.state.targetId; $(id).addClass('active').siblings('.page').removeClass('active'); });
注意，这里不能使用重置 location.href 的方法刷新，那样就不能再前进了。
下面附上 history 方法的完整 js 代码