0

我正在使用 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() 中指定的 url 只是一个 php 脚本，它与无样式的数据相呼应。因此，当用户重新加载页面时，新页面的元素排列随意，没有任何样式。关于如何克服这个问题的任何建议？提前致谢。

4

1 回答 1

0

我的想法：在这些 url 下提供完整的页面布局和适当的内容。所以直接访问后显示正确。对于 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
}
于 2013-07-21T10:43:47.467 回答