javascript를 이용한 tab 만들기

탭을 만드는 방식은 여러가지가 있다.

CSS만으로 구성할수도 있고

jquery.ui 를 가져다 쓸 수도 있다.

이 방식은 javascript의 onClick를 이용한 방법이다.

 

 

기본 Html 구성

 

<div class="tab_box">

  <button class="tabs" onClick="tabopen(event, 'tabname01')" id="basic_content">탭이름01</button>

  <button class="tabs" onClick="tabopen(event, 'tabname02')">탭이름02</button>

.

.

.

</div>

 

<div id="tabname01" class="content">

  탭이름01 에 따른 내용들

</div>

<div id="tabname02" class="content">

  탭이름02 에 따른 내용들

</div>

.

.

.

 

 

CSS 구성 (css의 디자인은 개인 취향 이므로 내용은 생략 필요한 부분만 색깔 표시)

.tab_box {}

.tabs {}

.tabs:hover {} 이부분은 탭부분 롤오버시 디자인 필요없을때에는 안해도 됨

.tab_box .active {} 이부분은 탭이 활성화 되어 있을때의 디자인

.content {display:none}  기본 내용은 안보이게 설정

 

JAVASCRIPT 구성

function tabopen(evt, contentName) {

  var i, tabcontent, tab_btn;

  

  tabcontent = document.getElementsByClassName("content");

  for (i=0;i<tabcontent.length;i++){  //내용을 나열

    tabcontent[i].style.display = "none";

  }

 

  tab_btn = document.getElementsByClassName("tabs"); 

  for (i=0;i<tab_btn;i++){ // 탭 버튼을 나열

    tab_btn[i].className = tab_btn[i].className.replace(" active", ""); // 탭 버튼을 눌렀을때에 탭 버튼에 기존 Class 삭제

  }

 

  document.getElementById(contentName).style.display = "block"  // 탭을 눌렀을때 해당 id의 내용을 출력

  evt.currentTarget.className += " active";  Class 생성 이벤트 발생

}

 

document.getElementById("basic_content").click(); // 실행시 기본 보여지는 탭란 내용 실행 항상 실행되는 tab html 아래에 위치 해야 한다. 나머지 스크립트는 상단이나 하단 상관 없다.