显示部分/ 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>