1

id="demo"リンクがクリックされたときに、更新されたアンカー/ハッシュを表示したいと思います。ドキュメントのレイアウトは次のとおりです。

<html>
<head>

<script type="text/javascript">
function myfunction()
{
document.getElementById("demo").innerHTML=location.hash;
}
</script>

</head>
<body>

<h1>Javascript</h1>
<p id="demo">This is a paragraph.</p>

<a href="#example" onclick="myfunction()">here</a>
</body>
</html>

唯一の問題は、リンクがクリックされたときに、リンクが 2 回目に押されるまで JavaScript が更新されたアンカー/ハッシュを取得しないことです。

4

4 に答える 4

2

現時点では場所が変更されていないためです。使用できる方法は次のとおりです。

function myfunction() {
    // Sets the event handler once you click, so it will execute when
    // the hash will change.
    window.onhashchange = function() {
        document.getElementById("demo").innerHTML=location.hash;
    };
}

現代的な方法は次のようになります。

var hashchange;
function myfunction() {
    if ( !hashchange ) {
        hashchange = addEventListener( 'change', function() {
            document.getElementById("demo").textContent = location.hash;

            // If you want to remove the event listener right after,
            // you can do this:
            removeEventListener( hashchange );
        }, false );
    }
}
于 2012-06-15T07:57:58.587 に答える
1

ハッシュの変更を検出するには、次の JQuery プラグインを試してください。

http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

これはオープンソースなので、コードをチェックしてみてください。これは驚くほど複雑で、300 行以上あります (注釈付きですが、まだ)。

于 2012-06-15T07:57:43.440 に答える
0

これは、「場所」がページ内のアンカーを参照するためです。

最初のクリックでは、ページ内に場所はありませんが、アンカーによって #example に移動しますが、これはすべて、onclick が機能した後に発生します。2 回目のクリックで、#example の場所が表示されます。

こちらのW3 Schools のドキュメントを参照してください。

onclick イベントは、アンカーがジョブを実行する前に発生します。これは、イベントの伝播をキャンセルし、リダイレクトなどを防止できるようにするために重要ですが、残念ながらコードをこじらせます。

于 2012-06-15T07:56:21.197 に答える
0

これを試して：

function myfunction() {
  setTimeout(function() {
    document.getElementById("demo").innerHTML=location.hash;
  }, 1);
}

リンクをクリックすると、ハッシュがまだ前のものであるため、遅延が必要です。

于 2012-06-15T07:58:03.267 に答える