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

我有一个带有五个链接和五个div的导航栏。单击第一个链接时，第一个div变为可见，其余的设置为

display:none

。其他人也是如此

我想让访问者将这些动态“页面”（可见的div）添加到书签中，所以我使用了URL散列。但它没有像我预期的那样工作。例如，无法直接浏览到一个特定的状态（其中显示特定的div）。如果我不清楚，我想要完成的与中相同，尽管没有使用

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>

div{display:none；}
div#intro{display:block；}





>
函数切换（）{
var i=0，
divs=document.getElementsByTagName（“div”），
hash=window.location.hash.substring（1）；//不带#
对于（i；i

问题在于

窗口。并非所有浏览器都支持onhashchange

。在某些不支持

onhashchange

的浏览器中，您可能需要设置计时器来轮询哈希中的更改。

---

有一个库可以为您执行此操作：，您可以看一看。

找到解决此问题的方法有点困难，但最终我明白，最快的方法是手动触发事件。您可以看到正在工作的小提琴，这是代码（我不得不使用scrollTo插件，因为我不知道如何滚动到元素，但你可以使用

窗口调整脚本。滚动
或对scrollTo插件本身进行一些编辑（这很容易理解，你可以只对元素进行持续时间为0的动画。顶部）：

您可以自己尝试，只需在JSFIDLE的URL之后添加
/show/
，然后使用已设置的哈希重新加载页面。
缺少
）
在
$（divs[i]
，打字错误？旁注：您也可以使用CSS3
：target
伪类。@LightStyle是的，谢谢，但这不是问题所在。是的，我明白了。无论如何，我不确定我是否完全理解您想要什么…这是jQuery版本，如果您已经有了它，您可以将其用于您的目的，否则就没有必要了（如果您仅将其用于这段代码）。
$(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');
    }
});