默认：带有 CSS 的目标

问题描述 投票：0回答：7

我有这个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
。

我该怎么做？谢谢。

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

html css css-selectors
7个回答
24
投票

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

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

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

3
投票

这似乎是我能找到的最短的答案：

location=location.hash||"#updates-list"

这只是将用户重定向到有效的哈希值（如果该哈希值当前不存在

或为空 
#
）。

~98% 的用户启用了 JavaScript，因此 JS 解决方案应该不是问题。

2
投票

我猜您想要做的是选择类似 

.tab_container:not(> :target) > .default
的内容，以在没有人成为目标时显示默认选项卡。但是，这是不可能的，因为 
:not()
伪类仅采用简单的选择器（即，仅 
:target
，而不是 
> :target
，在这种情况下，您将检查容器的目标，而不是子容器）。

我会执行以下任一操作：

  • 使用 Javascript 将目标设置为加载时的第一个选项卡（或者只要求存在锚点）。

  • 为第一个活动选项卡添加特定的覆盖类，并在第一个选项卡切换后将其删除（再次使用 Javascript）。

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

0
投票

有用：

.tab#tabControl { display:block; }

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

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

这不是一个纯粹的 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
投票

我找到了另一个解决方案，与此处显示的任何解决方案不同。我相信这仅限于相当现代的浏览器（我不知道完整的兼容性列表，但它从 2023 年底开始在 Chromium 中为我工作），但是以下 CSS 对我有用，只需对 HTML 进行细微调整（如下所示）：

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

对于 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
会查找不存在具有 
.tab
属性的 
:target
项的情况，然后在这种情况下，还将 
display: block;
应用于任何 
 .tab
元素也应用了 
.default
类。

这还有一些额外的好处：

  1. 它不需要任何特定的顺序，如RoToRa的答案；
  2. 一个可能有多个具有默认属性的选项卡，因此如果没有选择特定目标，页面上会显示多个内容（如果有，则只会显示该目标，就像以前一样）。

顺便说一句，我之所以找到这个解决方案，是因为 Amy Kapernick 关于在没有 JavaScript 的情况下做这样的事情的演讲。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.