默认值：使用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>在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屋！