我有这样的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坏了,如果它不是最初的目标。有人知道一个修复?
7条答案
按热度按时间ruyhziif1#
赞助商我不得不说,我能想到的唯一解决方案是不幸地使用JavaScript。类似于:
字符串
编辑:
好的,得到了一个CSS解决方案。但是这需要将默认条目
#updates-list
放在最后(在#updates-map
和任何其他可能添加的标签之后):型
rvpgvaaj2#
我知道这是一个老问题,但它仍然是相关的,我有另一个建议:
字符串
关于CSS:
型
这让你可以随意的排列标签,但是如果你是动态的生成html,你需要动态的生成css,或者在你写css的时候选择一个标签的最大数量。
lrpiutwd3#
这似乎是我能找到的最简短的答案:
第一个月
如果当前不存在``或为空
#
,则会将用户重定向到有效的哈希。大约98%的用户启用了JavaScript,所以JS解决方案不应该是一个问题。
2o7dmzc54#
我猜你会想做的是选择像
.tab_container:not(> :target) > .default
这样的东西来显示没有目标的默认选项卡。然而,这是不可能的,因为:not()
伪类只接受简单的选择器(即只有:target
,而不是> :target
,在这种情况下,你会检查容器的目标,而不是孩子)。我将执行以下操作之一:
第一种方法会扰乱浏览器的历史记录,而第二种方法则会导致代码混乱。我现在想不出一个“完美”的解决方案。也许你最好使用JavaScript来检测当前的目标,以便与非CSS3浏览器兼容,并以一种干净的方式解决这个特定的问题?
aoyhnmkz5#
有用:
字符串
ia2d9nvy6#
这不是一个纯粹的CSS解决方案,但它使用了一小部分JavaScript,大大简化了所有代码:
字符串
(来源:https://stackoverflow.com/a/32470599/1282216)
这里的极简SPA(单页应用程序)演示了这一点,第一个“页面”是可见的权利,但随后隐藏当其他链接被点击
型
gfttwv5a7#
我发现了另一个解决方案,与这里显示的任何解决方案都不同。我相信这仅限于相当现代的浏览器(我不知道完整的兼容性列表,但它在2023年底的Chromium中对我有效),但是下面的CSS对我有效,只对HTML进行了轻微的调整(如下所示):
字符串
实际上,在发布这个之后,我发现了另一个解决方案,可以说是更好的-尽管它需要将id为
updates-list
的ul
更改为div
(或者至少将其 Package 在一个中,具有包含tab
的class
属性):型
(我现在回到第一个解决方案。)
对于HTML,我基本上只是将
default
添加到#updates-list
ul标记的类列表中:(注:你也可以通过ID选择,而不是一个新的类,我只是找到了这个更干净的东西- YMMV。我还添加了一些文本到
#updates-map
,为了在屏幕上有一些东西,当我测试这个例子的时候。型
说明:
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,她在那里展示了这些东西。