[JS]탭 클릭 시 내용 노출, 비노출하기

안녕하세요 무택입니다 :)

오늘은 탭 클릭 시 원하는 내용을 노출시키거나 비노출시키는 코드에 대해 써보도록 하겠습니다. 정말 많이 사용하는 기능인데 아래에서 최대한 쉽게 설명을 해볼 테니 아래 내용을 참고해 주세요😀

 

 

탭 클릭 시 내용 노출, 비노출

HTML/CSS

<style>
    * { list-style: none; padding: 0; margin: 0; text-align: center; box-sizing: border-box; }
    .tab_wrap { display: flex; }
    .tab_wrap .tab { background: #efefef; padding: 1rem; width: 10rem; }
    .tab_wrap .tab:hover { font-weight: bold; cursor: pointer; }
    .tab.active { background: #000; color: #fff; font-weight: bold; }

    .content_wrap .content { width: 30rem; line-height: 10rem; background: #f9f9f9;  display: none; }
    .content_wrap .content.con_active { display: block; }
</style>

<ul class="tab_wrap">
  <li class="tab active">tab one</li>
  <li class="tab">tab two</li>
  <li class="tab">tab three</li>
</ul>

<div class="content_wrap">
  <div class="content con_active">tab one contents</div>
  <div class="content">tab two contents</div>
  <div class="content">tab three contents</div>
</div>

 

JS

const tab = document.querySelectorAll('.tab');
const con = document.querySelectorAll('.content');

tab.forEach(function(tab_btn, index){
  tab_btn.addEventListener('click',function(){
    tab.forEach(other_btn => {
      other_btn.classList.remove('active');
    });
    con.forEach(other_cont => {
      other_cont.classList.remove('con_active');
    });
    tab[index].classList.add('active');
    con[index].classList.add('con_active');
  });
});

 

 

Codepen

See the Pen [JS]탭 클릭 시 내용 노출, 비노출 by TytanLee (@TytanLee) on CodePen.

우측 상단의 codepen로고를 클릭하면 새 창으로 열 수 있습니다 :)

 

 

코드 설명

코드 원리

1. 탭과 콘텐츠를 배열로 선언

2. 탭을 클릭하면 탭과 콘텐츠에서 `active`클래스 제거

3. 클릭한 탭과 콘텐츠에는 `active`클래스 추가

 

아래에서는 자바스크립트에 대한 코드만 설명을 해보도록 하겠습니다.

 

const tab = document.querySelectorAll('.tab');
const con = document.querySelectorAll('.content');

 

탭 클래스와 컨텐츠 클래스를 변수로 불러옵니다.

 

 

tab.forEach(function(tab_btn, index){

`forEach`메서드는 배열반복문으로, 사용 방법으로는

"변수.forEach(funtion(메서드 안에서 쓰일 배열명, 찾아낼 배열의 순서){작동시킬 코드})" 이렇게 사용합니다.

 

즉 여기서는 위의 `tab`배열을 `forEach`메서드 안에서는 `tab_btn`으로 사용하겠다. 란 뜻입니다.

 

 

    tab.forEach(other_btn => {
      other_btn.classList.remove('active');
    });
    con.forEach(other_cont => {
      other_cont.classList.remove('con_active');
    });

여기서는 위의 `tab`과 `con`배열을 다시 불러와서 `active`클래스를 모두 제거해 주는 작업입니다.

 

 

    tab[index].classList.add('active');
    con[index].classList.add('con_active');

위에서 `active`클래스를 모두 제거한 후, 클릭한 배열에는 `active`클래스를 추가시키는 작업입니다. 위에서 `addEventListener`를 실행했을 때 클릭한 배열을 찾았기 때문에 `index`는 클릭된 배열의 순서를 나타냅니다.

 

 

여기까지 정말 자주 쓰이는 내용 노출, 비노출 코드에 대해 써봤는데 이해가 안 되는 내용이 있다면 댓글로 남겨주세요.