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

I have an html document with many elements like this

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

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

<p></p>
</article>

All I want to do is when the link becomes www.mylink.com#s4 then only the article with id=s4 to be appeared. And the other to dissapear. I know about the display:none; property-value but I dont know how to switch this value without javascript.

我想做的就是当链接变成www.mylink.com#s4然后只出现id = s4的文章。而另一个消失了。我知道显示器:无; property-value但我不知道如何在没有javascript的情况下切换这个值。

Thanks in advance...

提前致谢...

3 个解决方案

#1

In (IE < 9 ∉ modern browsers), you can use the :target pseudo-class:

在(IE <9∉现代浏览器)中,您可以使用:target伪类:

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

This pseudo-class matches the element that is referenced in the URL fragment.

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

For non-browsers, you can use conditional comment classes to show all of the sections and a warning message:

对于非浏览器,您可以使用条件注释类来显示所有部分和警告消息:

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

(or just use Javascript)

(或只是使用Javascript)

#2

You'll most likely want to use the :target pseudo class selector. Check out this page from css-tricks. It also includes a way to do this without :target so that it works in IE7+ (if that's important to you).

您很可能想要使用:target伪类选择器。从css-tricks中查看此页面。它还包括一种方法,可以在没有:target的情况下执行此操作,以便它在IE7 +中工作(如果这对您很重要)。

#3

-1

You first need to set your CSS like so:

首先需要像这样设置CSS:

article { display:none; }

And then have this JavaScript:

然后有这个JavaScript:

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

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

Just remember, users without JavaScript turned on won't see anything at all!

请记住,没有启用JavaScript的用户根本看不到任何东西!

#1