メインHTML、id="content"の部分に"data1.html"のid="content"内の内容を読み込みます。
サンプルは近々公開します。
○スクリプト部分
$(function(){
$("#content").load($("ul.pager li a:first").attr("href")+" #content");
$("ul.pager li a:first").addClass("selected");
$("ul.pager li a").click(function(){
$("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');
$("#content").data("file",$(this).attr("href"));
$('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
$("#content").load($("#content").data("file")+" #content");
})
$("ul.pager li a").removeClass("selected");
$(this).addClass("selected");
return false;
})
○メインのHTML
<div id="container">
<h1><img src="images/header.jpg" alt="新着書籍" /></h1>
<div id="content">
<p class="loading"><img src="images/loading.gif" alt="" /></p>
</div>
<ul class="pager">
<li><a href="data1.html">1</a></li>
<li><a href="data2.html">2</a></li>
<li><a href="data3.html">3</a></li>
</ul>
</div>
○data1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>data1</title>
</head>
<body>
<div id="content">
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868064-6">
<img height="80" width="56" alt="" src="./images/978-4-04-868064-6s.jpg"/>
</a>
</div>
<div class="info">
<h2>HALLO</h2>
<ul>
<li>日付 : 2009/11/06</li>
<li>名前 : 佐藤タロウ</li>
<li>年齢 : 25歳</li>
</ul>
</div>
</div>
</div>
</body>
</html>
○css部分
#container{
}
p.loading{
text-align:center;
margin:10px;
}
ul.pager{
text-align:center;
padding: 0 10px 0 10px;
}
ul.pager li{
display:inline;
}
ul.pager li a{
border:1px solid #666666;;
color:#666666;;
font-weight:bold;
margin:2px;
padding:5px;
text-decoration:none;
}
ul.pager li a.selected{
background:#EEEEEE;
}