使用jQuery处理浏览器历史记录

Question

目前我已经设置了一个系统，使得人们在页面上进展需要完成一定的步骤。我只是使用了显示和隐藏功能来进行进展，具体实现方式如下：

    function shownext(){
            $(this).next('div').fadeIn(500);
    }

    function showprev(){
            $(this).prev('div').fadeIn(500, backup);
    }

有没有一种方法可以实现深度链接，使用户可以使用浏览器的后退按钮返回到以前的步骤？

- Robert

---

使用 #anchors 提供历史路径，例如 #stepone、#steptwo... - Marek Sebera

有一个jQuery浏览器历史插件https://dev59.com/ak7Sa4cB1Zd3GeqP0Q4q - powtac

Answer 1

history.js库可以使用HTML5历史记录API（对于不支持该API的浏览器，它还提供了哈希后退）来轻松实现此类操作。

你可以这样做：

function shownext(){
        $(this).next('div').fadeIn(500);
        // Push state with next page number.
}

function showprev(){
        $(this).prev('div').fadeIn(500, backup);
        // Push state with previous page number.
}

History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    goToPage(State.data.page);
}

function goToPage(page)
{
    // Go to page.
}

该库的文档和演示非常有用。

- jjlharrison