WEBOPIXEL

jQueryで長くなったページを分割してボタンで切り替える

Posted: 2011.05.25 / Category: javascript / Tag: 

長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
でも、やっぱりページ別けしたいかな、でも同じ内容だし別けちゃうのもな、、、そんなときのためにjQueryを使用してわりとそのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。

Sponsored Link

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

「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();
	}
	

COMMENTS

pepepe 2012-10-17 08:50 

いつも拝見させていただいております。
今回こちらのjsを使用させていただいたのですが、ブラウザの戻るボタンを押した場合に一つ前のアンカータグに遷移させることは可能でしょうか。

webOpixel 2012-10-23 14:52 

HTML5のpushStateを組み合わせればできるかもしれません。

http://www.webopixel.net/javascript/402.html

Yossy 2012-12-28 11:08 

いつも参考にさせていただいています。

質問ですが、上記のスクリプトとHTMLの内容で
ページを分割した場合、他のページから「SECTION 02」の中の
特定の場所(IDかnameで指定した場所)へリンクさせることができますか?

「SECTION 01(最初に表示されている)」、「SECTION 02」

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。