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

时间:2018-03-08 18:21:10

标签: html css anchor show-hide target

一直在寻找一种易于使用的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 - 其他链接:secondWindowthirdWindow仅显示firstWindow内容。

我打赌这是解决我问题的简单方法。非常感谢一些帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

考虑将此作为评论,但很难阅读。它是@Sanchit Patiyal答案的DRY改进。 AFAIK得到了很好的支持:

&#13;
&#13;
type NewStruct struct{
    Name string `json:"name"`
    Code int    `json:"code"`
    anyPackage.DataStruct
}
&#13;
[id$="Window"] {
  display:none;
}
[id$="Window"]:target {
  display:block;
}

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