По умолчанию: цель с CSS

Спонтанно я должен был бы сказать, что единственное решение, которое я могу придумать, это, к сожалению, использование JavaScript. Что-то типа:

<script type="text/javascript">
  if (document.location.hash == "" || document.location.hash == "#")
    document.location.hash = "#updates-list";
</script>

ИЗМЕНИТЬ:

Хорошо, есть решение CSS. Однако для этого требуется, чтобы запись по умолчанию #updates-list была помещена последней (после #updates-map и любых других вкладок, которые вы можете добавить):

.tab, .tab:target ~ #updates-list  {
  display: none;
}
#updates-list, .tab:target {
  display: block;
}

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

<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>

<a id="tab1"></a>
<a id="tab2"></a>

<div class="tab tab1 default-tab">Some content</div>
<div class="tab tab2">Some other content</div>

и CSS:

.tab {display:none}

.default-tab {display:block}

:target ~ .default-tab {display:none}

#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
  display: block
}

Это позволяет вам упорядочивать вкладки так, как вы хотите, но если вы генерируете html динамически, вам нужно будет динамически генерировать css. Или же выберите максимальное количество вкладок для поддержки при написании css.

Я думаю, что вы хотели бы сделать, это выбрать что-то вроде .tab_container:not(> :target) > .default для отображения вкладки по умолчанию, когда никто не нацелен. Однако это невозможно, поскольку псевдокласс :not() принимает только простые селекторы (то есть только :target, а не > :target, и в этом случае вы должны проверять цель контейнера, а не дочерние элементы).

Я бы сделал одно из следующих действий:

• Используйте Javascript, чтобы установить цель на первую вкладку при загрузке (или просто требуйте наличия привязки).

• Добавьте определенный класс переопределения для первой активной вкладки и удалите его (снова с помощью Javascript) после первого переключения вкладок.

Первый вариант испортит историю браузера, а второй будет немного больше беспорядка в коде. Я не могу придумать "идеальное" решение прямо сейчас. Может быть, вам лучше просто использовать Javascript для определения текущей цели, чтобы получить совместимость с браузерами, отличными от CSS3, и решить эту конкретную проблему более простым способом?

Кажется, это самый короткий ответ, который я смог найти:

location=location.hash||"#updates-list"

Это просто перенаправляет пользователя на действительный хэш, если он в настоящее время не существует or empty #.

У ~98% пользователей включен JavaScript, так что решение на JS не должно быть проблемой.

Полезный:

.tab#tabControl { display:block; }

.tab:not(:target) { display:none; }

.tab:target ~ #tabControl { display:none; }