加载新的ajax内容时更改URL

Question

O hai！

所以，这里是一件事情：当点击导航中的链接时，我想通过jQuery漂亮的load()函数加载我的主div中的内容。迄今为止非常好，这完美地运作。当导航链接点击到该链接的标题属性时，我也想更改页面的标题。这也适用。但最后我还想更改页面的URL！现在我不知道如何重新加载整个页面，这是不可能的。

这里是我当前的代码： jQuery代码：

$(document).ready(function() { 
    $('nav ul li a').click(function() { 
     $('nav ul li a.active').removeClass('active'); 
     $(this).addClass('active'); 
     $('.contentPage').fadeOut('fast'); 
     $('#sectionContainer').hide().load($(this).attr('href')).fadeIn('slow'); 
     $('title').text($(this).attr('title')); 
     return false; 
    }); 
}); 

但我怎么可以改变当前的URL（即显示在地址栏和可复制粘贴并重定向到正确的'页'），而无需重新加载整个页面？

我想要的另一件事是，即使JS被禁用，导航中的所有页面都可以达到。你可能会说这已经发生了，对吗？呃，不，不是。我加载的元素都是简单的html文件，但缺少任何body，html，head。他们只是由一个部分组成;例如：

<section id="Pages2" class="contentPage"> 
    <h3>Portfolio</h3> 
    <p> 
     Vivamus turpis ligula, dignissim vel mollis id, vestibulum quis eros. Donec mi ligula, accumsan sed malesuada in, bibendum sit amet elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eros quam, iaculis aliquet viverra a, adipiscing nec elit. Nulla facilisi. Quisque tincidunt bibendum eros, et porttitor leo commodo sed. Nullam non tempus nisi. Nulla turpis elit, suscipit id bibendum at, eleifend a lectus. Quisque est sapien, bibendum a pharetra sed, dictum eu neque. Morbi eget ipsum leo. Nam tincidunt fringilla nisi id congue. 
    </p> 
</section> 
<!-- end Page2 --> 

所以，当Javascript被禁用时，我只会进入完全黑白色的默认页面布局。我不知道如何做到这一点，以便加载的页面包含所有的CSS和菜单和页脚（所以当JS被禁用时用户得到正常的布局），但是当页面嵌入load()它不会拧紧布局（并且不包含额外的菜单和页脚等）

对此有何想法？

Answer 1

目前IE还没有很好的支持，但你可以使用history.pushState()。

Further reading。