默认值：使用CSS的目标

c9x0cxw0 于 2023-11-19 发布在其他

关注(0)|答案(7)|浏览(113)

我有这样的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。
我该怎么做？谢谢。
更新：在此旁边，我的谷歌Map坏了，如果它不是最初的目标。有人知道一个修复？

css

来源：https://stackoverflow.com/questions/3354279/default-target-with-css

7条答案

按热度按时间

ruyhziif1#

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

型

赞(0）回复(0）举报 2023-11-19

rvpgvaaj2#

我知道这是一个老问题，但它仍然是相关的，我有另一个建议：

<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的时候选择一个标签的最大数量。

赞(0）回复(0）举报 2023-11-19

lrpiutwd3#

这似乎是我能找到的最简短的答案：
第一个月
如果当前不存在``或为空#，则会将用户重定向到有效的哈希。
大约98%的用户启用了JavaScript，所以JS解决方案不应该是一个问题。

赞(0）回复(0）举报 2023-11-19

2o7dmzc54#

我猜你会想做的是选择像.tab_container:not(> :target) > .default这样的东西来显示没有目标的默认选项卡。然而，这是不可能的，因为:not()伪类只接受简单的选择器（即只有:target，而不是> :target，在这种情况下，你会检查容器的目标，而不是孩子）。
我将执行以下操作之一：

使用JavaScript将目标设置为加载时的第一个选项卡（或仅要求存在锚）。
为第一个活动选项卡添加一个特定的覆盖类，并在第一次切换选项卡后删除它（再次使用JavaScript）。

第一种方法会扰乱浏览器的历史记录，而第二种方法则会导致代码混乱。我现在想不出一个“完美”的解决方案。也许你最好使用JavaScript来检测当前的目标，以便与非CSS3浏览器兼容，并以一种干净的方式解决这个特定的问题？

赞(0）回复(0）举报 2023-11-19

aoyhnmkz5#

有用：

.tab#tabControl { display:block; }

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

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

字符串

赞(0）回复(0）举报 2023-11-19

ia2d9nvy6#

这不是一个纯粹的CSS解决方案，但它使用了一小部分JavaScript，大大简化了所有代码：

location=location.hash||"#one"

字符串
（来源：https://stackoverflow.com/a/32470599/1282216）
这里的极简SPA（单页应用程序）演示了这一点，第一个“页面”是可见的权利，但随后隐藏当其他链接被点击

<!doctype html>
<title>personal web page</title>

<style>

 section:target {
  display: block;
}

section {
  display: none;
}

</style>

<h1>About me</h1>

<nav>
  <a href="#one">Travel</a>
  <a href="#two">Hobbies</a>
  <a href="#three">Links</a>
</nav>

<section id="one">  
  <h2>Travel</h2>
  <p>Places I like to travel to.</p>
</section>  

<section id="two">  
   <h2>Hobbies</h2>
   <p>Things I like to do.</p>
</section> 

<section id="three">  
  <h2>Links</h2>
  <p>My favourite links.</p>
</section>

<script>
  location=location.hash||"#one"
</script>

型

赞(0）回复(0）举报 2023-11-19

gfttwv5a7#

我发现了另一个解决方案，与这里显示的任何解决方案都不同。我相信这仅限于相当现代的浏览器（我不知道完整的兼容性列表，但它在2023年底的Chromium中对我有效），但是下面的CSS对我有效，只对HTML进行了轻微的调整（如下所示）：

<style type="text/css">
.tab {
  display: none;
}
.tab:target, :not(:has(.tab:target)) .tab.default {
  display: block;
}
</style>

字符串
实际上，在发布这个之后，我发现了另一个解决方案，可以说是更好的-尽管它需要将id为updates-list的ul更改为div（或者至少将其 Package 在一个中，具有包含tab的class属性）：

.tab {
  display: none;
}

.tab:target {
  display: block;
}

.tab_container {
  &:not(:has(.tab:target)) {
    & .tab:first-of-type {
      display: block;
    }
  }
}

型
（我现在回到第一个解决方案。）
对于HTML，我基本上只是将default添加到#updates-list ul标记的类列表中：
（注：你也可以通过ID选择，而不是一个新的类，我只是找到了这个更干净的东西- YMMV。我还添加了一些文本到#updates-map，为了在屏幕上有一些东西，当我测试这个例子的时候。

<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 default" id="updates-list">
    Eh.. Hello!
  </ul>
  <div class="tab map" id="updates-map">
    [Imagine a map here.]
  </div>
</div>

型

说明：

CSS第二部分中的第二个选择器:not(:has(.tab:target)) .tab.default，查找没有:target属性的.tab项的情况，然后在这种情况下，也将display: block;应用于任何也应用了.default类的.tab元素。
这也有一些额外的好处：
1.它不需要任何特定的顺序，如RoToRa's answer;
1.可能有多个选项卡具有默认属性，因此如果没有选择特定的目标，则页面上将显示多个内容（如果有，则只显示该目标，如前所述）。
顺便说一句，我之所以找到这个解决方案，是因为a talk by Amy Kapernick在没有JavaScript的情况下做这样的事情，这个答案中的第二个解决方案几乎是逐字改编自她的nojs demo site，她在那里展示了这些东西。

赞(0）回复(0）举报 2023-11-19

我来回答

默认值：使用CSS的目标

7条答案

说明：

相关问题

热门标签

最新问答