:targetで表示非表示切り替え

up:

demo

section-A
section-B

navi

source

<!DOCTYPE html>
<meta charset="utf-8">
<title>:target</title>
<style>
  section{ display: block; border: 1px solid #000; padding: 2em;  }
  section:target{ display: block; }
  section:not(:target){ display: none; }
  p.re{ display: none; }
  section:target ~ p.re { display: block; text-align: center; } 
</style media="screen">
<ul id="navi">
  <li><a href="#a">section-A</a></li>
  <li><a href="#b">section-B</a></li>
</ul>
<section id="a">
  <h1>section-A</h1>
</section>
<section id="b">
  <h1>section-B</h1>
</section>
<p class="re"><a href="#navi">navi</a></p>
  • CSS3未対応のIEではセクションがずらっと並ぶだけ
  • Safari4ではsection:target ~ p.re { display: block; }が有効にならなかった。イケルと思ったんだけどな…。セクション毎にナビを挿入してもいいんだけど。

SafariやChromeも2011年10月現在のバージョンなら、section:target ~ p.re { display: block; }が意図通り適応されてるっぽいです。