默认:目标与 CSS

Default :target with CSS(默认:目标与 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">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.

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.

我该怎么做?谢谢.

更新:接下来，如果不是初始目标，我的 Google 地图就会损坏.有人知道解决办法吗?

Update: Next to this, my Google Map is broken if it is not the initial target. Does anyone know a fix?

推荐答案

我不得不说，我唯一能想到的解决方案就是不幸地使用 JavaScript.比如:

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>

<小时>

好的，有一个 CSS 解决方案.但是，这需要将默认条目 #updates-list 放在最后(在 #updates-map 和您可能添加的任何其他选项卡之后):

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！