开始方案二 用html5 history.pushState(state,null,url); （IE9及以下版本不支持）
/**
* HTML5 history and ajax
*/
$(function(){
var ajax,
currentState;
$('li a').unbind().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
};
}
ajax = $.ajax({
type:'GET',
url: url,
dataType:'html',
success: function(html){
var state = {
url: url,
title: document.title,
html: $('.content').html()
};
history.pushState(state,null,url);
$('.content').html(html)
}
});
});
});
首页代码 index.htm
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <link rel="stylesheet" href="http://css.baojia.com/s4/c/css/reset.css"> <style> body{width: 80%;margin: 0 auto} ul { margin: 0 auto; overflow: none} /*ul li {float: left; background: #ccc;padding: 15px 20px;}*/ ul li {display: inline-table; background: #ccc;padding: 15px 20px; } ul li:nth-of-type(1){ margin-left: 0px } /*ul li {display: inline-table; background: #ccc;padding: 15px 20px;}*/ ul li a{color: #f0f0f0;} ul li.current{background: #ffde32} /*.all-content{400px;float:left;overflow:hidden;}*/ </style> </head> <body> <div class="container"> <ul class="list"> <li><a href="page1.htm">页面1</a></li> <li><a href="page2.htm">页面2</a></li> <li><a href="page3.htm">页面3</a></li> <li><a href="page4.htm">页面4</a></li> <li><a href="page5.htm">页面5</a></li> <li><a href="page6.htm">页面6</a></li> </ul> </div> <div class="content"> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> </body> </html>
拦截url hash并实现页面分发，主要的js
View Code再加上几个测试页面
测试页面1
View Code测试页面2 page2.htm，里面加了一个跳转，因为我们已经拦截a标签的跳转，所以我们也能实现hash跳转
View Code测试页面3 page3.htm page3.css 引入了一个外链css文件，这里要重点说明一下。我们在这里引入了css3，页面顺利加载了page3.css文件,page3.htm 的样式得以改变，
紧接着我们再回到page2.htm.但是刚才的page3.css的样式没影响到page2.htm。这里是个要注意的问题了，说明样式文件是会被自动移除的，这和页面的样式表重新渲染相符。
View Code.test3{display: block; 170px;height: 200px;background-color: #fb9876}
测试页面4 page4.htm。 这里直接进来可以顺利触发fun4的方法
View Code测试页面5 page5.htm 这里可以顺利执行document.body.onload方法 且执行本页的 $(function(){})方法体
View Code测试页面6 page6.htm page6.js
View CodeView Code最后你会发现，文件不管是外链js 还是内页js, 都会被存放在 index.htm。这可能会带来一些不好跟踪的问题
在做这个时候的时候可以脑补一下 htm页面渲染过程css和js的加载流程。
也顺便发现了一下其他该注意的问题
1、inline-table inline-block 4px间距问题
2、ajax读取本地文件设置问题