最近は、ページ遷移せずにページを切り替えるpJaxを使ったサイトを見かける機会が少しずつ増えてきました。

ただ、pJaxを実装するためには、JavaScriptを使う必要があります。

JavaScriptを使わずに、CSSでそれっぽく見せる方法はないかと考えてみたところ、
CSS3のセレクタである、:targetが使えるんじゃないかと思いついて、やってみることにしました。

↓作ってみたもの
DEMO

方法

CSS3では:targetにより、アンカーリンク(ページ内でのリンク)の対象となる要素に対して、
スタイルを適用することができます。

今回の方法では、対象となる要素をすべてposition:fixedで画面いっぱいに表示し、
リンクされていないときは、非表示にするという方法を使いました。