开始方案二 用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{width: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
再加上几个测试页面
测试页面1
测试页面2 page2.htm，里面加了一个跳转，因为我们已经拦截a标签的跳转，所以我们也能实现hash跳转
测试页面3 page3.htm page3.css 引入了一个外链css文件，这里要重点说明一下。我们在这里引入了css3，页面顺利加载了page3.css文件,page3.htm 的样式得以改变，
紧接着我们再回到page2.htm.但是刚才的page3.css的样式没影响到page2.htm。这里是个要注意的问题了，说明样式文件是会被自动移除的，这和页面的样式表重新渲染相符。
.test3{display: block; width: 170px;height: 200px;background-color: #fb9876}
测试页面4 page4.htm。 这里直接进来可以顺利触发fun4的方法
测试页面5 page5.htm 这里可以顺利执行document.body.onload方法 且执行本页的 $(function(){})方法体
测试页面6 page6.htm page6.js
最后你会发现，文件不管是外链js 还是内页js, 都会被存放在 index.htm。这可能会带来一些不好跟踪的问题
在做这个时候的时候可以脑补一下 htm页面渲染过程css和js的加载流程。
也顺便发现了一下其他该注意的问题
1、inline-table inline-block 4px间距问题
2、ajax读取本地文件设置问题
时间： 2024-12-21 18:38:52