TIL#4 __ <SCC/> 개인프로젝트 Tabs + modularization

탭메뉴

1. 탭메뉴를 구성하는데 구글에서 부트스트랩 관련 암만 검색해봐도 좀처럼 괜찮고 내 생각에 비슷한 예제를 찾지 못했다.

2. 그래서 그냥 내 식대로 구성

   <div class="tabs">
          <div class="tab-indicator"></div>
          <div class="tab-header">
            <div class="active" data-tab="tab-1">
              <i class="fas fa-chart-line"></i> 순위표
            </div>
            <div data-tab="tab-2">
              <i class="fa fa-pencil-square-o"></i> 경기일정
            </div>
            <div data-tab="tab-3">
              <i class="far fa-newspaper"></i> 주요 뉴스
            </div>
            <div data-tab="tab-4">
              <i class="fa fa-envelope-o"></i> 그외
            </div>
   	        </div>  

3. 탭을 감싸주는 큰 틀을 하나 만들고 그안에 탭의 인덱스인 Header와 Indicator를 넣고 탭 메뉴 별 태그를 달아줌으로써 탭에 대한 마크업을 수행.

4. 이후 class에 active가 있는 탭해더를 인디케이터로 지정해주고 마찬가지로 해당하는 탭메뉴만 보여지도록 JS, css구성

   function active_tab() {
     $("div.tab-header div").click(function () {
         const tab_id = $(this).attr("data-tab");
   
         $("div.tab-header div").removeClass('active')
         $(".tab-content").removeClass('active')
   
         $(this).addClass('active')
         $("#" + tab_id).addClass('active')
     })
     const tabHeader = document.getElementsByClassName("tab-header")[0];
     const tabIndicator = document.getElementsByClassName("tab-indicator")[0];
     const tabsPane = tabHeader.getElementsByTagName("div");
   
     for (let i = 0; i < tabsPane.length; i++) {
         tabsPane[i].addEventListener("click", function () {
             tabIndicator.style.left = `calc(calc(100%/4)*${i})`
         });
     }
   }