解 説

1ページのタブ型レイアウトです。
タブ型のナビゲーションでページ遷移するように見せていますが、各ページはすべて1ページ内のセクションを移動しているだけです。

この例はjQueryを使用します。

jQuery使用のポイントはこちら

タブ型レイアウトのサンプル
HTMLの例

CSSの設定

jQueryのコード

jQuery使用のポイント

さて、このjQueryで難しいとしたら、2行目の

の部分でしょう。#tab a.selectedのjQueryオブジェクトに2つのチェーンメソッドを設定したいのですが、最初のattr()はjQueryオブジェクトを返しません。ただの文字列を返すだけです。そのためshow()メソッドは動きません。
これを解決するために$(“#tab a.selected”).attr(“href”)をさらに$()で囲んでjQueryオブジェクトを作成しています。
チェーンメソッドの使い方のコツはjQueryオブジェクトができているかどうかがポイントです。
メソッドの特徴としてセッターメソッドはjQueryオブジェクトを作成し、ゲッターメソッドがテキストを返しているようです。