隱藏HTML元素無javascript，只有CSS

Question

我有很多元素的HTML文檔這樣

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

<p></p> 
</article> 

所有我想要做的就是當鏈路變得www.mylink.com#s4然後只id=s4文章將出現。另一個消失。我知道display:none;屬性值，但我不知道如何在沒有javascript的情況下切換此值。

在此先感謝...

Answer 1

在（IE < 9個∉現代瀏覽器），你可以使用: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）

Answer 2

您首先需要設置你的CSS像這樣：

article { display:none; } 

再有這樣的JavaScript：

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

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

請記住，未啓用JavaScript的用戶根本看不到任何內容！

Answer 3

你很可能會想要使用:target僞類選擇器。從css-tricks中查看this page。它還包括一種不使用:target的方法，以便它可以在IE7 +中工作（如果這對你很重要）。