加載新的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。