Показывать DIV только если URL не имеет идентификатора фрагмента

Question

Это трудно объяснить, что я имею в виду, так что увидеть это jsfiddle первый: http://jsfiddle.net/Gsggy/

Когда пользователь нажимает кнопку 1, отд номер 1 показывает, то же самое для других, достаточно просто ,

Однако, перед тем, как пользователь нажал на номер, нет ДИВ там, потому что она опирается на # значение в URL

Как я могу установить DIV по умолчанию, которое существует с пустой URL, например www.jsfiddle.com, но исчезает, когда кто-то нажимает номер и делает его www.jsfiddle.com/#1

Answer 1

Дело в том, что вы не можете направить цель на элемент, чтобы сказать «делать что-то, пока кто-то другой является целью».

Однако есть некоторые обходные пути этой дилеммы. Одним из решений было бы всегда распространять содержимое по умолчанию и отображать целевые элементы выше.

Вы можете использовать тот факт, что элементы, которые появляются позже в dom, обычно отображаются над узлами, которые появляются раньше. Таким образом, у вас может быть, например, отрицательное верхнее поле или абсолютный позиционированный элемент, покрывающий ваш контент по умолчанию.

Улучшение на вашем HTML структуры:

<div class="default" id="z">0</div> 
<div id="a">1</div> 
<div id="b">2</div> 
<div id="c">3</div> 

Это CSS делает работу:

.default { 
    display: block; 
    background: #eff; 
} 

div + div { 
    margin-top: -102px; 
} 

div:target { 
    background: #eef; 
    display: block; 
    position: relative; 
} 

Недостатком этого конкретного подхода является то, что вам нужно знать точные размеры вашего содержимого по умолчанию.

Смотрите эту скрипку: http://jsfiddle.net/Gsggy/4/

Answer 2

используйте селектор nth-of-type или last-of-type и создайте деблокировку по умолчанию в последнем, я думаю, что это будет работать в вашем случае