!DOCTYPE nico

Web Director nico0927's note

Category list & Search box

jqueryhtmlloadImage

jqueryでdiv要素の中身にHTMLファイルを読み込みボタンで切り替える

jqueryでdiv要素を切り替える際に、ファイル外から別のhtmlを読み込むパターンをよく使う。
切り替えたいdiv内のコンテンツは一つ一つファイル単位で切り離して管理したい場合が多い為だ。
コードも非常に簡潔で済む。

以下はあくまでサンプルなので参考程度に。

JSコード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
		//初期状態でのロードファイルを指定
		$('#contentsBox').load('contents1.html');
		//クリックで各コンテンツを切り替え
		$('.switchButton').click(function(){
			var loadContents = $(this).attr('title');
			$('#contentsBox').load(loadContents+'.html');
		});
	});
//]]>
</script>

まずはjqueryを読み込む。次に、ページアクセス時に表示させておきたいhtmlファイルを指定しておく。
switchButtonクラスを持つ要素をクリックすると、その要素内のtitle属性に「.html」を付け加えて読み込むパスへと変換し、contentsBox内に表示する仕組み。

HTMLコード

<div>
	<ul>
		<li class="switchButton" title="contents1">ボタン1</li>
		<li class="switchButton" title="contents2">ボタン2</li>
		<li class="switchButton" title="contents3">ボタン3</li>
	</ul>
</div>

<div id="contentsBox">
</div>

リスト要素はいくつ増やしてもOK。
ただし、title要素の中身を表示させたいファイル名に書き換えることを忘れずに。

読み込ませるhtmlファイルは拡張子こそhtmlだが、head要素やbody要素は必要ない。読み込ませたい内容をダイレクトに記述していい。

以上。

このエントリーをはてなブックマークに追加