jQueryで長くなったページを分割してボタンで切り替える
Posted: 2011.05.25 / Category: javascript / Tag: jQuery
長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。
でも、やっぱりページ別けしたいかな、でも同じ内容だし別けちゃうのもな、、、そんなときのために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」