javascript - 当我使用 jQuery 显示/隐藏元素时，如何使用片段来模拟后退按钮

Question

我使用 jQuery 来显示/隐藏与多步骤解决方案相对应的元素。现在我被要求使后退按钮发挥作用。

我知道使用片段可以在这里有所帮助，但我不确定如何。如果我在显示/隐藏元素时(当我从一个步骤移动到另一个步骤时)设置哈希值:

if($(button).hasClass('step-one')) {
        $('.step-two').show();
        window.location.hash = "#step2";
    } 

现在我已经正确设置了哈希值，但是当我单击后退按钮时，它只会删除哈希值。它的作用是...

window.history.back;

如何让它返回到上一步而不完全重新构建我所做的事情？或者不使用第三方插件，如 BBQ 或 Ben Alman 的 Hashchange 插件？

感谢您提供任何有用的提示。

Answer 1

我建议您尝试使用onhashchange..

尝试使用以下方法处理您的事件(显示和隐藏):

$(window).on('hashchange',function(){

    var hash = window.location.hash;
    switch(hash){
        case '#step1':
            console.log('Make something superb!');
            break;
        case '#step2':
            console.log('Make something superb!');
            break;
        case '#step3':
            console.log('Make something superb!');
            break;
        default:
            break;
    }

})

我不知道这是否会起作用...我没有测试它...但我认为你可以从这个开始...我还建议您使用 anchor 处理哈希:

<a href='#step1'></a>