开始方案二   用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

     
              
      
        
       
            
        
页面1
            
        
页面2
            
        
页面3
            
        
页面4
            
        
页面5
            
        
页面6
        
       
           
      
     
      
                   
      
          

 

拦截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读取本地文件设置问题