javascript - 使用内部页面引用隐藏/取消隐藏 HTML 中的元素

Question

是否可以让内部页面引用隐藏/取消隐藏元素。

    <div class="hidden">
    <div id="thanks">
        <h1>Thank you!</h1>
        <p></p>
        </div>
    </div>

因此您将访问“http://www.website.com/#thanks”，并且“隐藏”的 div 将被隐藏/反之亦然

Answer 1

是的，使用 :target 伪类。

#main {
  display: none;  
}
#main:target {
  display: block;
}

<a href="#main">main</a>

<div id="main">
  main section
</div>

或者，您可以像这样在 :target 中嵌套隐藏内容。

.hidden {
  display: none;  
}
:target .hidden {
  display: block;
}

<a href="#main">main</a>

<div id="main">
  <div class="hidden">
    main section
  </div>
</div>