3

私はJSが初めてで、非常に単純に見えるものに問題があります。ページがURLの最後に#で読み込まれるように、コードを作成しようとしています。www.example.com#hashtag の場合、div が表示されます。# がない場合、div は表示されません。

私のコード:

JS:

<script type="text/javascript">
if(window.location.hash) {
document.getElementById("displaydiv").style.display = "block"; 
}
</script>

HTML:

<div id="displaydiv" style="display: none; height: 100px; width: 100px; 
background-color: red;"></div>
4

3 に答える 3

2

コードは正しいのですが、がレンダリングされる前に<script>の実行が早すぎるため、ブラウザで JavaScript エラーが発生していると思われます。ブラウザのコンソールを確認しましたか？<div>

<script> の後にを移動する<div>と修正されますが、コードを関数に入れ、ページが読み込まれた後に呼び出すのが賢明な場合があります。次に例を示します。

<script type="text/javascript">
    function init() {
        if (window.location.hash) {
            document.getElementById("displaydiv").style.display = "block"; 
        }
    }

    window.onload = init;
</script>

<body onload="init ();"> の代替を参照してください

于 2012-08-30T10:11:57.267 に答える
0

これにより、ハッシュ (#displayDiv) が取得され、その特定の div が表示されます...

<script type="text/javascript">
  var hasher = window.location.hash;

  if(hasher.indexOf('displaydiv') > -1) {
    document.getElementById("displaydiv").style.display = "block"; 
  } else if (hasher.indexOf('anotherDiv') > -1) {
    document.getElementById("anotherDiv").style.display = "block";
  }
</script>

<div id="displaydiv" style="display: none; height: 100px; width: 100px; background-color: red;"></div>
于 2012-08-30T09:30:26.980 に答える
0

:targetセレクターを使用した単純な CSS ソリューションはどうでしょうか。

*:target {
  display: block;
}
于 2012-08-30T09:34:29.320 に答える