默认值：使用CSS的目标

小编典典

默认值：使用CSS的目标

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 Map不是最初的目标，它就会被破坏。有人知道解决方法吗？

阅读 243

2020-05-16

共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;
}

2020-05-16