Question

我有一个带有五个链接和五个div的导航栏。当我单击第一个链接时，第一个div变为可见，其余的设置为display: none。其他人也是如此。

我想让访问者为这些动态“页面”（可见的div）添加书签，所以我正在使用URL哈希。但它并没有像我预期的那样发挥作用。例如，无法直接浏览到某个特定状态（显示特定div）。如果我不清楚，我想要完成的内容与this video相同，但不使用next和prev方法。

以下是我的代码示例。

<style>
    div { display:none; }
    div#intro { display:block; }
</style>

<ul id="pages">
    <li><a href="#intro">First link</a></li>
    <li><a href="#continue">Second link</a></li>
    <li><a href="#end">Third link</a></li>
</ul>

<div id="intro"></div>
<div id="continue"></div>
<div id="end"></div>>

<script>
    function toggle() {
        var i = 0,
        divs = document.getElementsByTagName("div"),
        hash = window.location.hash.substring(1); //extracts hash without #

        for (i; i < divs.length ; i++) {
            if (divs[i].id == hash) {
                $(divs[i]).css("display", "block");
            }
            else {
                $(divs[i].css("display", "none");
            }
        }
    }

    window.onhashchange = toggle;
</script>

Answer 1

问题是所有浏览器都不支持window.onhashchange。在某些不支持onhashchange的浏览器中，您可能必须设置一个计时器来轮询哈希中的更改。有一个库可以帮到你：crossroad，你可以看一下。

Answer 2

找到解决方案有点困难，但最后我明白，最快的方法是手动触发事件。您可以看到工作小提琴here，这是代码（我必须使用scrollTo插件，因为我不知道如何滚动到元素，但您可以使用window.scroll或使用对scrollTo插件本身进行了一些编辑（这很容易理解，你可以只用一个持续时间为0的动画来实现element.top）：

$(window).on("hashchange", function (e) {
    var hash = location.hash,
        divs = $('div'),
        element = $(hash);
    divs.hide();
    element.show();
    $(document.body).scrollTo(hash, {
        duration: 0
    });
});
$(document).ready(function () {
    var hash = location.hash;
    if (hash !== '') {
        $(window).trigger('hashchange');
    }
});

你可以自己尝试一下，只需在jsfiddle的URL之后添加/show/，然后使用已设置的哈希重新加载页面。

使用location.hash显示/隐藏元素

2 个答案: