css - CSS - 显示/隐藏带有锚名称的内容

Question

单页网站

我有一个单页网站（只有一页）。我可以使用菜单导航以使用锚点名称访问页面的不同部分，就像（见侧边栏）：

WordPress 文档

隐藏其他内容

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

问题）

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

Answer 1

工作示例

试试这个 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;
}

Answer 2

是的，您可以仅使用 css 执行此操作，首先创建具有特定宽度和高度的 < div > 并溢出到隐藏，然后将您的东西放在这个 div 中并排

<a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

类似上面的东西；请注意，如果你有一个恒定的高度，你可以使用这个 html/css，你的东西的高度应该是一样的。