クリックでくるくるコンテンツが変わるJavaScript

久しぶりにJavaScript書いた。最近はもっぱらRubyばかり。
けっこうよく使ったりするので、メモっとく。いつもソースを残しておかないからゼロから作り直すのめんどくさい。

▽完成イメージ（ソースコピペで動作確認してください。）

HTMLはこんな感じ。displayの、noneとblockを切り替えるだけ。

<div id="col_1" class="colDes">コンテンツ1だよー</div>
<div id="col_2" class="colDes" style="display:none;">コンテンツ2だよー</div>
<div id="col_3" class="colDes" style="display:none;">コンテンツ3だよー</div>
<div id="col_4" class="colDes" style="display:none;">コンテンツ4だよー</div>
<div id="col_5" class="colDes" style="display:none;">コンテンツ5だよー</div>
<div id="col_6" class="colDes" style="display:none;">コンテンツ6だよー</div>

<div>
<span id="to_back">戻る</span>
<span id="to_next">次へ</span>
</div>

CSSは、とりあえず動きがわかりやすいようにやっつけ。

#to_next,#to_back {
	cursor: pointer;
	font-size: 200%;
}
#to_next {
	margin-left: 20px;
}
.colDes {
	background: #eee;
	width: 400px;
	height: 300px;
}

JSもシンプルだね。

(function(){
	var col = [];
	for( var i = 0; i < 6; i++ )
	{
		col[i] = document.getElementById( 'col_' + (i+1) );
	}
	var to_next = document.getElementById('to_next');
	var to_back = document.getElementById('to_back');

	var elm = function(arg)
	{
		for( var i = 0; i < col.length; i++ ){
			col[i].style.display = 'none';
		}
		return col[arg].style.display = 'block';
	}

	var i = 0;
	to_next.onclick = function()
	{
		if( col.length > 0 ){
			if( i < col.length - 1 ){
				i++;
				elm(i);
			}
		}
	}
	to_back.onclick = function()
	{
		if( col.length > 0 ){
			if( i == 0 ){
				i = 0;
				elm(i);
			}
			else{
				i--;
				elm(i);
			}
		}
	}
})();

応用すればAjaxで本とか作れるね！