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?

html css css-selectors
Edit
Report