使用链接或锚点显示和隐藏内容答案

【问题标题】：Show and hide content with link or anchor使用链接或锚点显示和隐藏内容
【发布时间】：2018-03-08 18:21:09
【问题描述】：

一直在寻找一种易于使用的纯 CSS 解决方案，以在目标上显示从链接到另一个页面上的锚点的内容，同时隐藏同一页面上的其余内容。

偶然发现这个旧帖子：CSS - show / hide content with anchor name

第二个答案在哪里：

<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;
 }

有点解决了我的问题。但是我只显示firstWindow - 其他链接：secondWindow 和thirdWindow 仅显示firstWindow 内容。

我敢打赌，我的问题有一个简单的解决方案。非常感谢一些帮助。提前致谢。

【问题讨论】：

标签： html css anchor show-hide target

【解决方案1】：

想将此作为评论，但很难阅读。它是对@Sanchit Patiyal 答案的干燥改进。 AFAIK 得到很好的支持：

[id$="Window"] {
  display:none;
}
[id$="Window"]:target {
  display:block;
}

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

<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>

【讨论】：