別のページをjQueryのajaxを使って読み込み表示させる
jQueryのajaxを使って別のページ(html)をページ内のある部分に読み込み表示させてみました。
概要
index.htmlにて、メニューのボタンを押すと、
$.ajaxにて、1.html(~4.html)のファイルを読み込み、
ページ内に表示させています。
今表示させているページのボタンを押すと、なにも起こらないようにしています。
デモは以下になります。
【html】
|
1 2 3 4 5 6 7 8 9 10 | <div class="gnavi"> <ul> <li><a href="1.html">1のページ</a></li> <li><a href="2.html">2のページ</a></li> <li><a href="3.html">3のページ</a></li> <li><a href="4.html">4のページ</a></li> </ul> </div> <div class="pageDisplay"> </div> |
【jquery】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(function(){ //ページを表示させる箇所の設定 var $content = $('.pageDisplay'); //ボタンをクリックした時の処理 $(document).on('click', '.gnavi a', function(event) { event.preventDefault(); //.gnavi aのhrefにあるリンク先を保存 var link = $(this).attr("href"); //リンク先が今と同じであれば遷移しない if(link == lastpage){ return false; }else{ $content.fadeOut(600, function() { getPage(link); }); //今のリンク先を保存 lastpage = link; } }); //初期設定 getPage("1.html"); var lastpage = "1.html"; //ページを取得してくる function getPage(elm){ $.ajax({ type: 'GET', url: elm, dataType: 'html', success: function(data){ $content.html(data).fadeIn(600); }, error:function() { alert('問題がありました。'); } }); } }); |
ページの切り替え時にエフェクトをつければ、
いい感じの遷移になると思います！
これを応用させれば、infinitescrollみたいな感じが作れるかな？？
phpが絡んで来るんでぜんぜん違うかな？？
やりよう次第で、もっと画期的かつかっこ良いコンテンツができそうですね！
Author Profile
スターフィールド編集部
SHARE
