javascript - 如何将哈希历史添加到可过滤的投资组合中？

Question

我正在为我的网站创建一个可过滤的投资组合。单击其中一个过滤器后，它会在我的 URL 末尾显示一个主题标签。例如，如果我点击设计，它将显示为 www.yourdomain.com/#design。

是否可以让浏览器后退按钮与它一起工作？也就是说，如果我单击此链接，我会将#design 添加到我的当前地址。单击后退按钮后，#design 哈希将被删除并显示最后选择的页面或过滤器。现在后退按钮可以使用，但它只显示我在 URL 中而不是在页面上选择的所有过滤器。

这有可能吗？

这是我尝试使用的设计示例 http://www.jsfiddle.net/xnnnk/6/

$(document).ready(function () {
    $(".filter").click(function () {
        var filterText = $(this).attr('href').replace('#', '');
        $(".projectGrid").hide();
        $(".projectHolder").show();
        $(".projectHolder").not('.' + filterText).hide();
        $(".projectGrid").fadeIn(1500);
        $('.filter').not($(this).toggleClass('activeWork')).removeClass('activeWork');
    });
});

谢谢

Answer 1

您可以检测到哈希变化，例如

$(window).on('hashchange', function() {
  console.log('changed to:'+document.location.hash);
});

并采取相应行动，可能会调用您发布的过滤代码。

这似乎得到了广泛支持， http://caniuse.com/#search=hash

我所描述内容的简单演示，

http://jsfiddle.net/3nA2p/1

http://jsfiddle.net/3nA2p/1/show