默认值:使用CSS的目标 [英] Default :target with 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>列表< / a>< / li&
< li>< a href =#updates-map>地图< / a>< / li>
< / ul>
< ul class =tab listid =updates-list>
Eh ..你好!
< / ul>
< div class =tab mapid =updates-map>< / div>
< / div>但是,如果没有目标,我的页面是空的(#$ c>) $ c>在URL中),并且尚未点击任何标签。我想显示 ul#updates-list
。
我该如何做?感谢。
更新:在此旁边,如果Google地图不是初始目标,有人知道修复吗?
解决方案自然我不得不说,唯一可以想到的解决方案是不幸的是使用JavaScript 。像:
< script type =text / javascript>
if(document.location.hash ==|| document.location.hash ==#)
document.location.hash =#updates-list;
< / script>
EDIT: / p>
好吧,得到了一个CSS解决方案。然而,这需要最后放置默认条目#updates-list
(在#updates-map
您可以添加):
.tab,.tab:target〜#updates-list {
display:none;
}
#updates-list,.tab:target {
display:block;
}
I have this CSS:
<style type="text/css">
.tab {
display: none;
}
.tab:target {
display: block;
}
</style>
And this 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>
However, my page is empty if no target (#
in URL) is specified and no tab is clicked yet. I want to show ul#updates-list
by default.
How can I do this? Thanks.
Update: Next to this, my Google Map is broken if it is not the initial target. Does anyone know a fix?
解决方案 Spontaneously I'd have to say that the only solution I can think of is unfortunately using JavaScript. Something like:
<script type="text/javascript">
if (document.location.hash == "" || document.location.hash == "#")
document.location.hash = "#updates-list";
</script>
EDIT:
Ok, got a CSS solution. This however requires the default entry #updates-list
to be placed last (after #updates-map
and any other tabs you may add):
.tab, .tab:target ~ #updates-list {
display: none;
}
#updates-list, .tab:target {
display: block;
}
这篇关于默认值:使用CSS的目标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!