ページ内リンクしたマークアップでページ分割する

「section」ごとにページを分割します。
それぞれにidを割り振り、そのidに飛ぶように「nav」にはリンクを付けます。
普通のページ内リンクですね。

html

 
	<ul class="nav">
		<li><a href="#c1">1</a></li>
		<li><a href="#c2">2</a></li>
		<li><a href="#c3">3</a></li>
		<li><a href="#c4">4</a></li>
	</ul>

	<div id="c1" class="section">
		<h2>SECTION 01</h2>
		<p>
			長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
		</p>
	</div>
	<div id="c2" class="section">
		<h2>SECTION 02</h2>
		<p>
			そのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。
		</p>
	</div>
	<div id="c3" class="section">
		<h2>SECTION 03</h2>
		<p>
			長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
		</p>
	</div>
	<div id="c4" class="section">
		<h2>SECTION 04</h2>
		<p>
			そのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。
		</p>
	</div>

jQueryの部分です。
読み込まれたら最初の「section」だけ表示している状態にします。
ボタンがクリックされたら表示されている「section」を非表示にして、クリックされた「section」を表示してるだけですね。

javascript

 
	$(function() {
		var pages = $('.section');
		//sectionを全て非表示
		pages.hide();
		//最初のsectionを表示
		pages.eq(0).fadeIn();

		$('.nav a').click(function(event){
			event.preventDefault();
			var nextPage = this.hash;
			pages.hide();
			$(nextPage).fadeIn();
	    });
	});

ナビゲーションを自動で作成する

せっかくjQueryを使用しているので次は最低限のマークアップでナビゲーションなどは自動で作成してみます。

html

	<div class="section">
		<h2>SECTION 01</h2>
		<p>
			長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
		</p>
	</div>
	<div class="section">
		<h2>SECTION 02</h2>
		<p>
			そのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。
		</p>
	</div>
	<div class="section">
		<h2>SECTION 03</h2>
		<p>
			長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
		</p>
	</div>
	<div class="section">
		<h2>SECTION 04</h2>
		<p>
			そのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。
		</p>
	</div>

今度はidも割り当ててないので、まずはidを割り当てて「section」の数だけナビゲーションリストを作成します。

javascript

	$(function() {
		var pages = $('.section');
		pages.hide();
		//最初のsectionを表示
		pages.eq(0).fadeIn();
		//ナビゲーション
		pages.parent().prepend('<ul class="nav"></ul>');
		pages.each(function (i) {
			//ナビゲーションリスト追加
			$('.nav').append('<li><a href="#c'+( i+1 )+'">'+( i+1 )+'</a></li>');
			//連番idの追加
			$(this).attr('id', 'c'+(i+1));
		});
		$('.nav a').click(function(event){
			event.preventDefault();
			var nextPage = this.hash;
			pages.hide();
			$(nextPage).fadeIn();
	    });
	});

ちなみにクリックしたa要素の「#」を取得は「this.hash」じゃなくて「$(this).attr(‘href’)」でもよさそうですが、appendで追加した要素だとieの場合はフルパスになってしまうようです。

指定要素を最初に開く

今までのサンプルは最初の要素がはじめに開きますが、他ページから「index.html#c2」というリンクにして最初に指定要素を開きたい場合があります。
5行目の「pages.eq(0).fadeIn();」を削除して、14行目のクリックイベントの前に以下を追加します。

javascript

	//URLに#がついてたら該当しているidを開く
	if ( location.hash ) {
		$('html,body').scrollTop(0);
		$(location.hash).fadeIn();
	} else {
		pages.eq(0).fadeIn();
	}