默认：带有 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默认情况下。

我怎样才能做到这一点？谢谢。

更新：接下来，如果不是初始目标，我的谷歌地图就会损坏。有谁知道修复方法吗？

我不得不说，不幸的是，我能想到的唯一解决方案就是使用 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;
}