Скрыть элементы 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 ∉ современных браузерах) вы можете использовать псевдокласс <code>:target:

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

Этот псевдокласс соответствует элементу, на который ссылается фрагмент URL.

Для не браузеров вы можете использовать классы условных комментариев , чтобы показать все разделы и предупреждающее сообщение:

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

(или просто использовать Javascript)

Answer 2

Скорее всего, вы захотите использовать псевдо-класс :target.Проверьте эту страницу из css-tricks.Он также включает способ сделать это без :target, чтобы он работал в IE7 + (если это важно для вас).

Answer 3

Сначала вам нужно настроить свой CSS следующим образом:

article { display:none; }

И затем иметь этот JavaScript:

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

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

Просто помните, что пользователи без включенного JavaScript ничего не увидятна все!