[JS] 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> 

출처 - http://hyeonseok.com/pmwiki/index.php/Javascript/Tab