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

У меня есть этот CSS:

<style type="text/css">
.tab {
  display: none;
}
.tab:target {
  display: block;
}
</style>

И этот HTML:

<div class="tab_container">

  <ul class="tabs">
    <li><a href="#updates-list">List</a></li>
    <li><a href="#updates-map">Map</a></li>
  </ul>

  <ul class="tab list" id="updates-list">
    Eh.. Hello!
  </ul>
  <div class="tab map" id="updates-map"></div>
</div>

Однако моя страница пуста, если не указана цель (# в URL-адресе) и пока не нажата никакая вкладка. Я хочу показать ul#updates-list по умолчанию.

Как я могу это сделать? Спасибо.

Обновление. Рядом с этим моя карта Google сломана, если она не является начальной. Кто-нибудь знает об исправлении?

Ответ 1

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

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

EDIT:

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

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

Ответ 2

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

<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.

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

Ответ 5

Полезное:

.tab#tabControl { display:block; }

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

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