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

Question

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

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

所以你会访问＆＃34; http://www.website.com/#thanks＆＃34;和div＆＃34;隐藏＆＃34;将被隐藏/反之亦然

Answer 1

是的，使用:target伪类。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

或者，您可以将隐藏内容嵌入:target内部。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下JavaScript从URL中获取哈希值（＃）之后的值。

var hash = location.hash.substr(1);

然后，您可以根据结果隐藏/取消隐藏。