默认值:带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地图不是初始目标,我的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 时选择要支持的最大标签数。