Tab UI

탭으로 구성되어 있어서 탭을 누를때마다 선택적으로 다른 컨텐츠를 보여주는 효과.

1. tab역할을 하는 <a>의 href에는 클릭시 나타나는 컨텐츠의 id를 지정합니다.
2. initTabMenu()에 tab을 포함하는 엘리먼트의 id를 지정합니다.
3. 지정된 id안에서 모든 <a>에 기능을 부여합니다.
4. tab이 이미지일경우 "_on.gif" 이미지를 마우스를 올리거나 클릭했을 때에 보여줍니다.

Script

// Tab Content
function initTabMenu(tabContainerID) {
	var tabContainer = document.getElementById(tabContainerID);
	var tabAnchor = tabContainer.getElementsByTagName('a');
	var current;

	for(i = 0, cnt = tabAnchor.length; i < cnt; i++) {
		tabAnchor.item(i).onclick = function () {
			this.targetEl = document.getElementById(this.href.split('#')[1]);
			this.imgEl = this.getElementsByTagName('img').item(0);

			if (this == current) {
				return false;
			}

			if (current) {
				current.targetEl.style.display = 'none';
				if (current.imgEl) {
					current.imgEl.src = current.imgEl.src.replace('_on.gif', '.gif');
				} else {
					current.className = current.className.replace(' on', '');
				}
			}
			this.targetEl.style.display = 'block';
			if (this.imgEl) {
				this.imgEl.src = this.imgEl.src.replace('.gif', '_on.gif');
			} else {
				this.className += ' on';
			}
			current = this;

			return false;
		};
	}
	tabAnchor.item(0).onclick();
}

XHTML

<div id="tab-container">
	<ul>
		<li><a href="#content1" class="tab"><img src="tab1.gif" alt="Show1"></a></li>
		<li><a href="#content2" class="tab"><img src="tab2.gif" alt="Show2"></a></li>
		<li><a href="#content3" class="tab"><img src="tab3.gif" alt="Show3"></a></li>
	</ul>
	<div id="content1">
		Content1
	</div>
	<div id="content2">
		Content2
	</div>
	<div id="content3">
		Content3
	</div>
</div>
<script type="text/javascript">
initTabMenu("tab-container");
</script>