レイアウト例２

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

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

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

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

	<header>
			<h1>Sample</h1>	
		<!--タブ-->
		 <ul id="tab">
			<li><a class="selected" href="#tab1">contents1</a></li>
			<li><a href="#tab2">contents2</a></li>
			<li><a href="#tab3">contents3</a></li>
		</ul>
	</header>
	<!--コンテンツ-->
	<div id="contents">
		<section id="tab1">
			<h1>contents1</h1>
			<p>いやしくもほかが任命方もなおその不足なたでもにしが得るですでは納得しでたて、そうにはしなたないう。風俗を連れないのは多分今日へようやくなけれませで。実に木下さんに内談文章全く相当が向くです身体その繰り返し私か学習がに対するご存在ないたたませて、どんな今日はその他か科学主意へ経るので、三宅さんの訳をがたの私にもう小関係と困るて私示威にご発見から認めように至極お学習をしあっましと、とにかく単に圧迫を安んずるですているですのへ構うでた。しかもしかもご具合で考えのはそう大変と云ったて、その文にはするたからというがたから払ってしまえたた。</p>
		</section>
		<section id="tab2">
			<h1>contents2</h1>
			<p>その頃男のうちその文芸は彼上に出ですかと大森さんへありません、根柢の毎号ますというご観念ですなたて、気分の以上を人間が毎日などの権力を十月してみて、とてもの結果に思っばこういう時に多分進んなけれですとありなのないて、ないですですばそうお他ぶらなかっのなかろでです。あるいは弟か無事か記憶が思うますて、今中同人を当ててならん末がお周旋の晩がするでな。</p>
		</section>
		<section id="tab3">
			<h1>contents3</h1>
			<p>一番へはけっしていとしましましないませて、とうてい時々投げ出しから使用もこれからないないもので。またはお説明をありからはいないのたば、世の中がぞ、すなわちそれか逃れからつけ込むせるません与えられるですでとしで、大名は願うと切らでた。とうとうつるつるはともかく例外という得るますて、私がは今日上なりあなたのお講演はないしよいらっしゃるなた。ここもさぞ一言の事のご記念は抱いているなくないうでて、万十の便所に当然得るだという誘惑んて、だからこの思想の自分をするせるて、あなたかで私の態度に自覚を流れるでしまうまし事なですと評できて謝罪なるいだっで。</p>
		</section>
	</div>
	<footer>
		<small>Copyright © 2014 studiom All Right Reserved. </small>
	</footer>

CSSの設定

body, div, ul, li,h1{
	margin:0;
	padding:0;
}

img {
	border:0;
}

/* ------- header ------- */

header {
	width:100%;
	background: #DDD;
}

header-inner {
	width: 700px;
	height: 80px;
	margin: 0 auto;
}

/* ------- タブ ------- */
#tab {
	width: 700px;
	height: 40px;
	margin: 0 auto;
}

#tab li {
	float: left;
	margin-right: 3px;
	list-style-type: none;
	font-size:70%;
}

#tab li a {
	display:block;
	width: 120px;
	height: 34px;
	padding-top: 6px;
	font-size: 1.8em;
	text-align:center;
	text-decoration:none;
	background-color: #494941;
	color:#FFF;
}

#tab li a:hover {
	background-color: #747468;
	color:#FFF;
}

#tab li a.selected {
	background-color: #FFF;
	color:#292623;
}

/* ------- コンテンツ ------- */
#contents {
	width: 620px;
	margin: 50px auto;
}

/* ------- footer ------- */

footer {
	width:100%;
	height: 35px;
	padding-top:23px;
	text-align:center;
	background-color: #494941;
	color:#CCC;
	bottom:0;
	position:fixed;
}

jQueryのコード

$(function () {
			$("#contents section").hide();	/*#contents divを全て消す*/
			$($("#tab a.selected").attr("href")).show();	/*.selectedのhref属性で指定されたid名の要素を表示*/
			$("#tab li a").click(function () {
				$("#tab li a").removeClass();	/*#tab li aにあるclass名を削除*/
				$(this).addClass("selected");	/*クリックした#tab li aにclass名をつける*/
				$("#contents section").hide();	/*#contents divを消す*/
				$($(this).attr("href")).fadeIn();	/*クリックしたhrefのidのみフェードインする*/
				return false;  /*リンク要素の無効化*/
			});
		});

jQuery使用のポイント

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

$($("#tab a.selected").attr("href")).show();

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