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> after将<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 回答