javascript - location.hash を使用した要素の表示/非表示

Question

5 つのリンクと 5 つの div を持つナビゲーション バーがあります。最初のリンクをクリックすると、最初の div が表示され、残りは に設定されdisplay: noneます。同じことが残りの部分にも当てはまります。

訪問者がこれらの動的な「ページ」(目に見える div) をブックマークできるようにしたいので、URL ハッシュを使用しています。しかし、期待どおりに機能していません。たとえば、特定の 1 つの状態 (特定の 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>