你可以在没有JS的情况下使用the <label> – <input type="checkbox"> trick：

.classy, .classier {
  display: none;
  height: 100px;
  aspect-ratio: 1 / 1;
}

input:checked ~ .classy,
input:not(:checked) ~ .classier {
  display: block;
}

.classy {
  background: #eee8aa;
}

.classier {
  background: #96e3ce;
}

<a href="#targeturl">
  <label for="targeturl">Click me!</label>
</a>

<!-- This is meant to be hidden -->
<input type="checkbox" id="targeturl">

<div class="classy">.classy</div>
<div class="classier">.classier</div>

请注意，这将滚动到复选框，而不是两个<div>。为它设置一个不同的id（或使用display: none/visibility: hidden隐藏它）将有效地完全消除这种行为。

:target解决方案

正如评论中所说，ID应该是唯一的，但我们仍然可以使用唯一的ID来显示/隐藏CSS元素。
只要ID被附加在一个元素中，该元素至少是你想要隐藏的元素中最低的共同祖先和最老的（classy，classiest，classiest），我们可以使用CSS兄弟组合符（~）并这样做：

.classy,
.classier,
.classiest {
  display: none;
}

#targeturl:target.classy,
#targeturl:target~.classier,
#targeturl:target~* .classiest {
  display: block;
}

<a href="#targeturl">SHOW</a> | <a href="#">HIDE</a>

<div id="targeturl" class="classy">
  hidden classy
</div>
<div>
  something not hidden
</div>
<div class="classier">
  hidden classier
</div>
<div>
  yet again something not hidden
</div>
<div>
  another thing not hidden
  <div class="classiest">
    hidden classiest
  </div>
</div>

如果你不介意改变HTML结构，最好将ID附加到你想要隐藏的元素的父元素上：

.classy,
.classier,
.classiest {
  display: none;
}

#targeturl:target .classy,
#targeturl:target .classier,
#targeturl:target .classiest {
  display: block;
}

<a href="#targeturl">SHOW</a> | <a href="#">HIDE</a>

<div id="targeturl">
  <div class="classy">
    hidden classy
  </div>
  <div>
    something not hidden
  </div>
  <div class="classier">
    hidden classier
  </div>
  <div>
    yet again something not hidden
  </div>
  <div>
    another thing not hidden
    <div class="classiest">
      hidden classiest
    </div>
  </div>
</div>