html - 显示部分/div 取决于链接中散列# 值之后

Question

我有以下页面

section {
 height: 1000px;
 background: yellow;
 margin: 50px;
}

<section id="one">Section one</section>
<section id="two">Section two</section>

如果用户来自包含散列后的部分 ID 的链接，则可以仅使用 html/css 仅显示一个部分，例如

• 如果用户转到链接http://my-site/page#one他应该只看到第一部分
• 如果用户转到链接http://my-site/page#two他应该只看到第二部分
• 如果用户转到链接http://my-site/page他应该看到所有部分

?

Answer 1

您可以调查 :target 的使用情况伪类，但当 URL 哈希为空时，您可能很难显示所有部分。

例如:

section:not(:target) { display:none; }
section:target { display: block }

<a href="#one">One</a>
<a href="#two">Two</a>

<section id="one">Section one</section>
<section id="two">Section two</section>