同じページ内で、メニューをクリックすると別HTMLを読み込んで表示させる必要がありました。

ページ全体を切り替えるのではなく、切り替えたい部分だけコンテンツを読み込んで切り替えたいというときに。

サンプルを作りましたので、ご覧ください。

「クリックすると別のHTMLコンテンツをAjaxで読み込み表示させる」サンプル


別ファイルで作ったHTMLを読み込むので、スムーズなページ遷移が可能になります。



【作り方】

jQueryプラグインを利用せずに、コードを書いていきます。
よくわからない人もコピペしながら使うと、なにをしているのかわかってくると思います。

1. jsファイルを作成して、以下のように記述します。
別HTMLを読み込む時にぐるぐる回るローディングも表示させるようにしてあります。



最初にページを開いたときに表示させたいコンテンツは、23行目の
getPage(“test1.html”);
var lastpage = “test1.html”;
のtest1.htmlを変更します。

url 読み込むファイルを指定。
dataType 受け取るデータの種類。「html」「xml」「json」など。
success データ取得成功後に実行する処理。
error エラーが発生したときに実行する処理。


2.メニューの部分とコンテンツ表示部分は以下のようになります。


3.読み込むHTMLファイルを作ります。
例えば、サンプルで利用しているtest1.htmlファイルは以下のようになっています。


</body>の直前または</head>にjQueryや書いたスクリプトを読み込むを記述します。パスに注意。


読み込ませたいHTMLファイルを作成する必要がありますが、コンテンツ更新時などにはファイル管理も楽になりそうです。

ソースがすっきりするのでいいですね。

最後にサンプルのソースを書いておきますので、どうぞご参考まで。


この記事と関連してると思われる記事: