Archive / Javascript / Tab

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

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

Script

// Tab Content
function initTabMenu(tabContainerID) {
	var tabContainer = document.getElementById(tabContainerID);
	var tabAnchor = tabContainer.getElementsByTagName("a");
	var i = 0;

	for(i=0; i<tabAnchor.length; i++) {
		if (tabAnchor.item(i).className == "tab")
			thismenu = tabAnchor.item(i);
		else
			continue;

		thismenu.container = tabContainer;
		thismenu.targetEl = document.getElementById(tabAnchor.item(i).href.split("#")[1]);
		thismenu.targetEl.style.display = "none";
		thismenu.imgEl = thismenu.getElementsByTagName("img").item(0);
		thismenu.onclick = function tabMenuClick() {
			currentmenu = this.container.current;
			if (currentmenu == this)
				return false;

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

			return false;
		};

		if (!thismenu.container.first)
			thismenu.container.first = thismenu;
	}
	if (tabContainer.first)
		tabContainer.first.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>