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

Question

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

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

Однако, прежде чем пользователь нажал на число, там нет div, потому что он опирается на значение # в 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 и сделайте div по умолчанию в прошлом, я думаю, что это будет работать в вашем случае