【jQuery入門】Ajaxでページのコンテンツを取得して更新する

ソースコード

以下は、タブを切り替えた際にAjaxでページコンテンツを取得して更新するサンプル

<div id="container">
  <ul>
    <li><a href="html.html">HTML</a></li>
    <li><a href="js.txt">JavaScript</a></li>
    <li><a href="css.html">CSS</a></li>
    <li><a href="jquery.html">jQuery</a></li>
    <li><a href="php.php">PHP</a></li>
  </ul>
  <div></div>
</div>

$(function() {
  var tabs = $('#container');
  $('> ul li:first a', tabs).addClass('selected');
  $('> div', tabs).load(
    $('> ul li:first a', tabs).attr('href'));　// 初期表示
  $('> ul li a', tabs).click(function(e) {
    if (!$(this).hasClass('selected')) { // 選択中のタブの再クリックは無視する
      $('> ul li a.selected', tabs).removeClass('selected');
      $(this).addClass('selected');
      $('> div', tabs).load($(this).attr('href')); // 選択されたコンテンツを取得して更新
    }
    e.preventDefault();
  });
});

#container {
  width: 690px;
}

#container > ul {
  margin: 0px;
  padding: 0px;
}

#container > ul li {
  list-style-type: none;
  float: left;
  line-height: 160%;
  width: 138px;
  height: 40px;
}

#container > ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #cfc;
  color: #000;
  border: solid 1px Black;
}

#container > ul li a.selected {
  background-color: #000;
  color: #fff;
}

#container > div {
  border: 1px solid #c0c0c0;
  border-top: none;
  padding: 15px;
}