CSS - 使用 anchor 名称显示/隐藏内容

Question

单页网站

我有一个单页网站(只有一页)。我可以使用菜单导航以使用 anchor 名称访问页面的不同部分，就像(参见边栏):

WordPress Docs

隐藏其他内容

我想隐藏不属于当前事件页面部分的内容，只显示我正在查看的部分的信息。

问题

• 我可以仅使用 CSS 隐藏不属于当前 #anchor_part 的内容吗？
• 您是否看到任何网站已经这样做了？

Answer 1

Working Example

试试这个 Html

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

和CSS

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}