Question

我对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>

Answer 1

代码是正确的，但是<script>执行得太早，在呈现<div>之前，所以我怀疑你在浏览器中遇到JavaScript错误。你检查过浏览器控制台了吗？

在<script>之后移动<div> 将修复它，但将代码放入函数并在页面加载后调用它可能是明智之举，例如：

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

请参阅Alternative to <body onload="init ();">

Answer 2

这将获得哈希（#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>

Answer 3

使用:target选择器的简单CSS解决方案如何：

*:target {
  display: block;
}

JavaScript使用标签更改显示

3 个答案: