탭메뉴

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

<style>
  .tab_menu{position:relative;}
  .tab_menu .list{overflow:hidden;}
  .tab_menu .list li{float:left;}
  .tab_menu .list .btn{font-size:13px; margin-right:14px;}
  .tab_menu .list .cont{display:none; position:absolute; background:#555; color:#fff; text-align:center; width:250px; 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>

 

위와 같이 .btn과 .cont가 하나의 li 태그로 묶여서 li태그를 제어하면

버튼과 컨텐츠 영역을 모두 제어할 수 있게 마크업을 하는 방법에선

특별하게 많은 스크립트가 필요하지 않다.

이 방법은 스크립트를 간소화 할 수 있는 장점과 동시에

마크업 구조도 접근성을 높일 수 있는 구조로 작성을 했기 때문에 좀 더 괜찮은 소스라 생각한다.

 

<style>
  .tab_menu{position:relative;}
  .tab_menu .list{overflow:hidden;}
  .tab_menu .list li{float:left; margin-right:14px;}
  .tab_menu .list .btn{font-size:13px;}
  .tab_menu .list .cont{display:none; position:absolute; background:#555; color:#fff; text-align:center; width:250px; 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>

 

 

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

 

<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="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">
      Tab Content1
    </div>
    <div id="tab2" class="cont">
      Tab Content2
    </div>
    <div id="tab3" class="cont">
      Tab Content3
    </div>
  </div>
</div>

 

작업을 하다보면 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="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">
      Tab Content1
    </div>
    <div id="tab2" class="cont">
      Tab Content2
    </div>
    <div id="tab3" class="cont">
      Tab Content3
    </div>
  </div>
</div>

<script>
  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');

        // 나머지 컨텐츠 display:none 처리
        contents[j].style.display = 'none';
      }

      // 버튼 관련 이벤트
      this.parentNode.classList.add('is_on');

      // 버튼 클릭시 컨텐츠 전환
      activeCont = this.getAttribute('href');
      document.querySelector(activeCont).style.display = 'block';
    });
  }
</script>