index.html

<a class="tab tab-one tab-active" href="#" tabindex="0">1</a>
<a class="tab tab-two" href="#" tabindex="0">2</a>
<a class="tab tab-three" href="#" tabindex="0">3</a>

<section data-tab="one" data-tab-active=""><h2>One</h2> micro tabs are hot</section>

<section data-tab="two"><h2>Two</h2> they work really well</section>

<section data-tab="three"><h2>Three</h2>accept the annoying default browser scroll to.</section>

style.css

/* Hide all tab sections.*/
[data-tab] {
  display:none;
}

/* Lets show the first section*/
[data-tab-active] {
  display:block;
}

/* Set focus for each tab, because we declare tabindex the state holds */
.tab:focus {
  outline:none;
}

/* The only draw back is we must declare each tab. hey we do that anyways in js solutions*/
.tab-one:focus ~ [data-tab=one],
.tab-two:focus ~ [data-tab=two],
.tab-three:focus ~ [data-tab=three]{
  display:block;
}

/* Hide all sections not in focus */
.tab:not(.tab-one):focus ~ [data-tab-active]{
  display:none;
}