隐藏没有javascript的HTML元素，只有CSS答案

【问题标题】：Hide HTML elements without javascript, only CSS隐藏没有javascript的HTML元素，只有CSS
【发布时间】：2011-12-04 16:12:11
【问题描述】：

我有一个包含许多这样的元素的 html 文档

<article class=slide id=s4>
<h1></h1>

<p></p>
</article>

我想要做的就是当链接变为www.mylink.com#s4 时，只会出现带有id=s4 的文章。而另一个消失。我知道 display:none; 属性值，但我不知道如何在没有 javascript 的情况下切换此值。

提前谢谢...

【问题讨论】：

【解决方案1】：

在（IE :target 伪类：

section {
    display: none;
}
section:target {
    display: block;
}

此伪类匹配 URL 片段中引用的元素。

对于非浏览器，您可以使用conditional comment classes 显示所有部分和警告消息：

.lt-ie9 section {
    display: block;
}
.ie-warning {
    display: none;
}
.lt-ie9 .ie-warning {
    display: block;
}

（或只使用 Javascript）

【讨论】：

【解决方案2】：

您很可能希望使用:target 伪类选择器。从 css-tricks 中查看 this page。它还包括一种无需:target 的方法，因此它可以在 IE7+ 中工作（如果这对您很重要）。

【讨论】：

【解决方案3】：

你首先需要像这样设置你的 CSS：

article { display:none; }

然后有这个JavaScript：

var id = document.location.hash.replace('#','');

if(document.location.hash != ''){
    document.getElementById(id).style.display = 'block';
}

请记住，没有打开 JavaScript 的用户将什么都看不到！

【讨论】：