0

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

我想让访问者为这些动态“页面”（可见的 div）添加书签，所以我使用的是 URL 哈希。但它没有像我预期的那样工作。例如，不可能直接浏览到一个特定状态（显示特定 div 的位置）。如果我不清楚，我想要完成的内容与此视频中的相同，尽管没有使用nextandprev方法。

这是我的代码示例。

<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>
4

2 回答 2

0

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

$(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');
    }
});

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

于 2013-06-16T10:17:50.937 回答
0

window.onhashchange并非所有浏览器都支持该问题。在一些不支持的浏览器中onhashchange，您可能需要设置一个计时器来轮询哈希的变化。有一个图书馆可以为你做这件事：crossroad，你可以看看。

于 2013-06-16T09:48:20.700 回答