[JS]現在位置を示すナビゲーションを作成するチュートリアル

Ask the CSS Guyのエントリーから、CSSのみの簡単なナビゲーションからはじまり、最終的にはJavaScriptで現在位置を示すナビゲーションまでの実装をステップごとに解説したチュートリアルを紹介します。

how to switch the on state of navigation links for dynamic pages
最終形のデモ

チュートリアルのステップは、下記のようになっています。

1. Example 1
   ナビゲーションをリスト要素で実装。
2. Example 2
   スタイルシートで装飾。
3. Example 3
   スタイルシートで現在位置を実装。
4. Example 4
   onclickを使用して選択箇所を実装。
5. Example 5
   クリック時の不具合に対応。
6. Example 6
   最終形、現在位置を示すナビゲーション。
7. Example 7
   Example 6を使用して、パネルを切り替え。
8. Example 8
   jQueryを使用して、パネルを切り替え。