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时选择支持的最大选项卡数。

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

默认值：带CSS的目标

5 个答案: