在重新载入页面时使用History.js时遇到问题

Question

我使用History.js通过菜单浏览用户。

Menu   content 

home   |-------| 
books   |  | 
vidoes   |  | 
about   |_______| 

HTML：

<div class="menu" id="home">Home</div> 
<div class="menu" id="books">Books</div> 
<div class="menu" id="videos">Videos</div> 
<div class="menu" id="about">About</div> 
<div id="container_main_content"></div> 

的jQuery：

$(
function() 
{ 

// Prepare 
var History = window.History; // Note: We are using a capital H instead of a lower h 
if (!History.enabled) { 
    // History.js is disabled for this browser. 
    // This is because we can optionally choose to support HTML4 browsers or not. 
    return false; 
} 

// Bind to StateChange Event 
History.Adapter.bind(window,'statechange',function() 
{ // Note: We are using statechange instead of popstate 
    var State = History.getState(); 
    console.log(State); 
    $.get(State.url,function(data) 
     { 
      $("#container_main_content").html(""); 
      $("#container_main_content").append(data); 
     }); 
}); 

$('.menu').click(function(evt) 
{ 
    switch(evt.target.id) 
    { 
     case "home":History.pushState(null, $(this).text(), "/main/main.php?state="+evt.target.id+"&action=nav"); 
break; 
case "books": History.pushState(null, $(this).text(), "/books/books.php?state="+evt.target.id+"&action=nav"); 
break; 
/*and so on....*/ 
} 

的问题是，在History.pushState（）指定的网址只是一个PHP脚本呼应数据SANS的造型。因此，当用户重新加载页面时，新页面的元素会随意排列而不带任何样式。有关如何解决这个问题的任何建议？ 在此先感谢。

Answer 1

我的想法：在这些网址下提供完整的页面布局和适当的内容。所以直接访问后，它显示正确。你需要“第二个版本”的Ajax请求。它可以通过仅为其他版本获取ajax来完成，例如，在这个url下books.php?state=1&action=nav&ajax=true当然推入历史这个url books.php?state=1&action=nav（没有ajax变量）。

在PHP做它像这样：

if($_GET['ajax']!='true') { 
    //echo layout head 
} 

//echo content 

if($_GET['ajax']!='true') { 
    //echo layout foot 
}