Default :target with CSS

Admin 1
Viewed 13600

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?

css-selectors css html
6 Answers

This is not a pure CSS solution, but it uses one tiny bit of JavaScript that vastly simplifies the all the code:

location=location.hash||"#one"

(Thanks to: https://stackoverflow.com/a/32470599/1282216)

Here's minimalist SPA (Single Page Application) that demonstrates this. The first "page" is visible right away, but then hidden when the other links are clicked

<!doctype html>
<title>personal web page</title>

<style>

 section:target {
  display: block;
}

section {
  display: none;
}

</style>

<h1>About me</h1>

<nav>
  <a href="#one">Travel</a>
  <a href="#two">Hobbies</a>
  <a href="#three">Links</a>
</nav>

<section id="one">  
  <h2>Travel</h2>
  <p>Places I like to travel to.</p>
</section>  

<section id="two">  
   <h2>Hobbies</h2>
   <p>Things I like to do.</p>
</section> 

<section id="three">  
  <h2>Links</h2>
  <p>My favourite links.</p>
</section>

<script>
  location=location.hash||"#one"
</script>
user_12822160
Related