一直在寻找一种易于使用的纯 CSS 解决方案,以显示从链接到另一个页面上的 anchor 的目标内容,同时隐藏同一页面上的其余内容。
偶然发现这个旧帖子: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
内容.
我敢打赌,我的问题有一个简单的解决方案。非常感谢一些帮助。提前致谢。
最佳答案
想把它作为评论,但很难阅读。它是对@Sanchit Patiyal 答案的 DRY 改进。据我所知,它得到了很好的支持:
[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>
关于html - 使用链接或 anchor 显示和隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49179945/