[38JS] #11 서로 다른 내용을 보여주는 탭 만들기

38가지 자바스크립트&리액트 튜토리얼

★최종 결과물

Content01

this is content01 description

Content02

this is content02 description

Content03

this is content03 description

 

0. 작업 개요

이번엔 사이트 제작에서 국밥처럼 등장하는 탭에 따라 내용이 바뀌는 걸 만들어보자.

만드는 데에는 정말 다양한 방법이 있겠지만 기본적인 골자는

1. 각탭에 맞는 content영역이 존재하고, active, 혹은 on 등의 활성화 클래스가 붙을 경우에만 노출

2. 해당 탭을 클릭하면 해당 DOM만 active 상태가 되고 나머지는 숨김처리.

 

혹은

 

1. 각 탭이 눌릴때 마다 고정된 콘텐츠의 내용을 변경해 주기

 

각각 장단점이 있는데, 대표적으로는 전자는 연결되는 내용이 눈에 보여 유지보수가 용이하고,

후자는 코드가 짧아진다는 장점이 있다.

 

 

---

 

1. HTML

// 미리 콘텐츠들을 만들어 두는 경우

<div class="content_container">
    <div class="tabMenu">
        <button type="button" data-tab-id="content01" onclick="changeTabMenu(this)">tab01</button>
        <button type="button" data-tab-id="content02" onclick="changeTabMenu(this)">tab02</button>
        <button type="button" data-tab-id="content03" onclick="changeTabMenu(this)">tab03</button>
    </div>
    <div class="content_area active" data-content-id="content01">
        <h3>Content01</h3>
        <p>this is content01 description</p>
    </div>
    <div class="content_area" data-content-id="content02">
        <h3>Content02</h3>
        <p>this is content02 description</p>
    </div>
    <div class="content_area" data-content-id="content03">
        <h3>Content03</h3>
        <p>this is content03 description</p>
    </div>
</div>

- - - - - - - - -

// 하나의 콘텐츠 내용을 변경하는 경우

<div class="content_container">
    <div class="tabMenu">
        <button type="button" data-tab-id="content01" onclick="changeTabMenu(this)">tab01</button>
        <button type="button" data-tab-id="content02" onclick="changeTabMenu(this)">tab02</button>
        <button type="button" data-tab-id="content03" onclick="changeTabMenu(this)">tab03</button>
    </div>
    <div class="content_area">
        <h3>Content01</h3>
        <p>this is content01 description</p>
    </div>
</div>

 

전자의 경우 미리 첫 번째 콘텐츠에 actvie 클래스를 달아주고,

하단 css와 같이 기본 content_area에 display: none 속성, content_area.active에 display: block 속성을 주자.

(기본 속성이 flex라면 flex, block라면 block.. )

그리고 content_area와 tab 버튼에 식별을 위한

data-content-id 혹은 id 혹은 class 등으로 식별할 수 있는 식별자를 추가해 주자.

 

하나의 콘텐츠로 내용을 변경하는 경우엔 따로 할 건 없다.

2. CSS

// 미리 콘텐츠들을 만들어 두는 경우

    .content_area {
        display: none;
    }

    .content_area.active {
        display: block;
    }

 

3. JS

// 미리 콘텐츠들을 만들어 두는 경우

const changeTabMenu = (e) => {
    const tabMenuContainer = e.closest('.content_container');
    const tabId = e.dataset.tabId;

    tabMenuContainer.querySelectorAll('.content_area').forEach((content) => {
        content.classList.remove('active');
    })

    tabMenuContainer.querySelector(`[data-content-id=${tabId}]`).classList.add('active');
}

- - - - - - - -

// 하나의 DOM 내용을 변경하는 경우

const changeTabMenu = (e) => {
    const tabMenuContainer = e.closest('.content_container');
    const tabId = e.dataset.tabId;

    const tabMenuContent = tabMenuContainer.querySelector('.content_area');
    const tabMenuContentTitle = tabMenuContent.querySelector('h3')
    const tabMenuContentDesc = tabMenuContent.querySelector('p')

    const infor = {
        content01: {
            title: 'Content01',
            decs: 'this is content01 description'
        },
        content02: {
            title: 'Content02',
            decs: 'this is content02 description'
        },
        content03: {
            title: 'Content03',
            decs: 'this is content03 description'
        },
    }

    console.log(infor[tabId].title)

    tabMenuContentTitle.innerText = infor[tabId].title
    tabMenuContentDesc.innerText = infor[tabId].decs
}

 

---

 

조금 더 응용하면 선택된 버튼에도 active 클래스등을 달아 현재 어떤 탭이 선택되어 있는지 표현도 가능하다.