jQuery リンク先のHTMLファイルをAjaxで読み込み表示させる

こんな画面があるとします。

f:id:sho322:20150204203000j:plain

リンクをクリックすると・・・

f:id:sho322:20150204203008j:plain

f:id:sho322:20150204203029j:plain

こうやって画面遷移なしで別のHTMLファイルの内容が読み込まれて反映されるようにしてみます。

f:id:sho322:20150204203014j:plain

jQueryのメソッドは.load()を使います。

$('#content').load('hoge.html #loadedContent');

上の例では、#contentでjQueryオブジェクトを作ります。
そして、hoge.htmlを指定して読み込みます。

#loadedContentというのは、HTMLの一部を読み込むために指定します。
この例だと、#loadedContentというidを持つ要素を読み込むわけです。

用意するHTMLファイルは以下のとおりです。

load2.html

<img src="image/1.jpg">

load3.html

<img src="image/2.jpg">

load4.html

<img src="image/3.jpg">

画像ファイルを読み込むHTMLです。

そして、ajaxでクリックしたリンク先のHTMLファイルを読み込むサンプルはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
  console.log("fuuuuu");
$('nav a').on('click', function(e) {
    //stops the link taking users to a new page
    e.preventDefault();
    var url = this.href;

    $('nav a.current').removeClass('current');
    $(this).addClass('current');

    //The element holding the content is removed
    $('#container').remove();

    //.load() fetches the new content.
    $('#content').load(url).hide().fadeIn('slow');

  });
});

</script>
</head>
<body>
<nav>
  <a href="load2.html" class="current">Home</a>
  <a href="load3.html">two</a>
  <a href="load4.html">three</a>
</nav>

<section id="content">
  <div id="container">

  </div>
</section>
</body>
</html>