자바스크립트(JavaScript) - 탭 메뉴(Tab-Menu) 구현

작업을 하면서 가장 많이 구현하게 되는 기능 중 하나인 탭메뉴를 2가지 방법으로 구현해보자.

 

1. 탭 버튼과 탭 컨텐츠가 한 영역으로 묶여 있는 경우

 

전체 소스

<style>
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none; color:#333;}
.wrap{padding:15px; letter-spacing:-0.5px;}
.tab_menu{position:relative;}
.tab_menu .list{
  overflow:hidden;
  display: flex;
  padding-left: 140px;
}
.tab_menu .list li{margin-right:14px;}
.tab_menu .list .btn{font-size:13px;}

.tab_menu .list .cont{
  display:none;
  position:absolute;
  top:25px;
  left:0; 
  background:green;
  color : white;
  text-align:center;
  width:500px;
  height:100px;
  line-height:100px;}

.tab_menu .list li.is_on .btn{
  font-weight:bold;
  color:green;
  }
.tab_menu .list li.is_on .cont{
  display:block;
  }
 </style>

<div class="tab_menu">
  <ul class="list">
    <li class="is_on">
      <a href="#tab1" class="btn">Tab Button1</a>
      <div id="tab1" class="cont">Tab Content1</div>
    </li>
    <li>
      <a href="#tab2" class="btn">Tab Button2</a>
      <div id="tab2" class="cont">Tab Content2</div>
    </li>
    <li>
      <a href="#tab3" class="btn">Tab Button3</a>
      <div id="tab3" class="cont">Tab Content3</div>
    </li>
  </ul>
</div>

<script>
  const tabList = document.querySelectorAll('.tab_menu .list li');
  
  for(var i = 0; i < tabList.length; i++){
    tabList[i].querySelector('.btn').addEventListener('click', function(e){
      e.preventDefault();
      for(var j = 0; j < tabList.length; j++){
        tabList[j].classList.remove('is_on');
      }
      this.parentNode.classList.add('is_on');
    });
  }
</script>

위와 같이 버튼(.btn)과 창(.cont)이 인접해 있을때 하나의 li 태그로 묶여서 li태그를 제어하면 버튼과 컨텐츠 영역을 모두 제어할 수 있게 마크업을 하는 방법에선 더욱 간단하고 효율적으로 만들 수 있다.

---

 

구현 결과 및 소스 리뷰

1. .tab_menu .list의 li안에 있는 각 버튼에 addEventListener로 'click' 이벤트를 걸어준다. (for문을 통해)

2. 해당 이벤트에 preventDefault()로 a태그 클릭시 href로 인한 화면 이동을 막아준다.

3. 버튼을 클릭시 해당 버튼의 부모요소(li태그)에 is_on 클래스를 생성.

4. 버튼을 누른 창만 활성화 될 수 있도록 3번단계를 실행하기전 앞서 버튼 클릭했을 때 다른 부모요소(다른 li태그들)의 활성화창의 is_on 클래스를 삭제시켜준다.

 

* 기존에 css로 .is_on 클래스에 의해 컨텐츠의 display가 none/block 되도록 설정해놓았기 때문에 is_on 클래스로 탭을 구현한다.

 

* 버튼 (a태그)마다 href를 통해 해당 탭에 해당하는 컨텐츠의 id값과 연결시켜준 이유는
해당 버튼과 컨텐츠의 접근성을 위해 연결해놓은 것이다. (버튼과 컨텐츠를 연결)

 

---

 

2. 탭 버튼과 탭 컨텐츠가 다른 영역에 위치하고 있을 때

작업을 하다보면 1번에서 소개한 바와 같이 버튼과 컨텐츠를 한 군데 묶기 힘든 경우도 많이 생긴다.

위의 소스와 같이 탭과 컨텐츠가 마크업상 분리 되어있을 때 사용할 수 있는 탭도 구현해보자

 

전체 코드

<style>
  .tab_menu{position:relative;}
  .tab_menu .list{overflow:hidden;}
  .tab_menu .list li{float:left; margin-right:14px;}
  .tab_menu .list li.is_on .btn{font-weight:bold; color:green;}
  .tab_menu .list .btn{font-size:13px;}
  .tab_menu .cont_area .cont{position:absolute; top:25px; left:0; background:#555; color:#fff; text-align:center; width:250px; height:100px; line-height:100px;}
</style>

<div class="wrap">
  <div class="tab_menu">
    <ul class="list">
      <li class="is_on">
        <a href="#tab1" class="btn">Tab Button1</a>
      </li>
      <li>
        <a href="#tab2" class="btn">Tab Button2</a>
      </li>
      <li>
        <a href="#tab3" class="btn">Tab Button3</a>
      </li>
    </ul>

    <div class="cont_area">
      <div id="tab1" class="cont" style="display:block;">
        Tab Content1
      </div>
      <div id="tab2" class="cont">
        Tab Content2
      </div>
      <div id="tab3" class="cont">
        Tab Content3
      </div>
    </div>
  </div>
</div>

const tabList = document.querySelectorAll('.tab_menu .list li');
const contents = document.querySelectorAll('.tab_menu .cont_area .cont')
let activeCont = ''; // 현재 활성화 된 컨텐츠 (기본:#tab1 활성화)

for(var i = 0; i < tabList.length; i++){
  tabList[i].querySelector('.btn').addEventListener('click', function(e){
    e.preventDefault();
    for(var j = 0; j < tabList.length; j++){
      tabList[j].classList.remove('is_on');

      contents[j].style.display = 'none';
    }
    this.parentNode.classList.add('is_on');
    activeCont = this.getAttribute('href');
    document.querySelector(activeCont).style.display = 'block';
  });
}

1번과 다르게 탭 버튼과 탭 컨텐츠가 따로 떨어져 있더라도 위의 소스처럼 activeCont 처럼 현재 활성화 할 탭 컨텐츠를 변수로 받아서 탭 버튼을 클릭할 때마다 a태그의 href 값을 받아와 해당하는 id값을 가진 컨텐츠를 만들어 구현해보자.

 

구현 결과 및 소스 설명

 

위와 같이 동일한 탭 효과를 구현할 수 있다.

 

* 여기서 중요한 점은 1번과 마찬가지로 버튼(a태그)의 href 속성과
각 탭에 해당하는 컨텐츠 영역의 id값을 일치시켜서 접근성을 높여주는 것이다.

 

 

 

(!)
키보드 접근성을 고려하면 위의 소스처럼 버튼 영역 다음에 바로 해당 버튼과 연관 된 컨텐츠가 잡히기 때문에
접근성 측면에서 1번과 같이 버튼과 컨텐츠가 인접한 구조로 탭 메뉴를 작성하는 것을 추천한다.