jquery - 使用历史（pushState，popState）在 div 中加载页面的内容

Question

我希望有人可以帮助我解决以下问题：假设我有代码：

<ul id="navbar">
    <li><a href="Item1.php">Item1</a></li>
    <li><a href="Item2.php">Item2</a></li>
    <li><a href="Item3.php">Item3</a></li>
</ul>

<div id="content"></div>

为了在按下菜单项时在 div#content 中加载 Item*.php 的内容，我使用 jQuery：

$(document).ready(function(){
    $('a').click(function(){
        $('#content').load(the correct file);
    });
});

但现在我无法按后退或前进或查看浏览器历史记录。那么我应该如何使用 pushState 和 popState 来做这些事情呢？

Answer 1

在这里，我们需要根据位置 href 加载页面内容，因此我们将使用 push/popstate 来解决这个问题

我做了这样的事情：

$(document).ready(function(){

   $(window).bind('popstate', function(event){
        parse_location_href();
    });

    $('a').click(function(){
        history.pushState(null,null, '/correct item php');
        $('#content').load(correct item php);
    });
});

function parse_location_href()
{
    urlParams = get_query_params(); // get which item.php has to be called from query params
    set_form_params(urlParams); // here you update page params/setting (not always required)
    
    $('#content').load(load correct item.php);
}

希望能帮助到你