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

Question

У меня есть этот 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 не работает, если она не является начальной целью.Кто-нибудь знает исправление?

Answer 1

Спонтанно я должен сказать, что единственное решение, которое я могу придумать, - это, к сожалению, использование 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;
}

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

Answer 3

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

Полезно:

.tab#tabControl { display:block; }

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

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