[Javascript] 한 페이지안에서 탭을 이용해 내용바꾸기

싱글페이지 애플리케이션(SPA) 를 만드는데 유용한 기능으로 한페이지 내에서 여러 탭키를 누르면 내용들이 바뀌는 효과를 보여줄 수 있습니다.

 

++ 사용할 메서드

• classList.add
• classList.remove
• data- (target.dataset) 활용
• addEventListener

 

 

++ HTML5 에서 추가된 태그 (semantic tag)

<article></article>	<session></session>
- HTML 5 에서 추가된 태그 - 특정한 영역 그룹화 - 다른영역에서도 쓰일 수 있는 영역에 쓰임	- HTML 5 에서 추가된 태그 - 특정한 영역 그룹화
블로그 및 SNS 포스팅, 뉴스 기사영역, 신문 논평 등

 

[HTML]

<div class="about-center section-center">
    <article class="about">
    	<!-- 버튼 컨테이너 -->
        <div class="btn-container">
            <button class="tab-btn active" data-id="연혁">연혁<button>
            <button class="tab-btn" data-id="사업구조">사업구조<button>
            <button class="tab-btn" data-id="투자계획">투자계획<button>
        </div>
    </article>
	<article class="about-content">
        <div class="content active id="연혁">
            <h3>연혁</h3>
            <p>우리 회사는 어쩌구저쩌구</p>
        </div>
        <div class="content id="사업구조">
            <h3>사업구조</h3>
            <p>사업구조에 대해서 어쩌구저쩌구</p>
        </div>
        <div class="content active id="투자계획">
            <h3>투자계획</h3>
            <p>투자계획에 있어서 어쩌구저쩌구</p>
        </div>
    </article>
</div>

 

[CSS]

 

- 기본적으로 tab 과 content 는 display:none 이지만 classList 를 통해 active 를 추가해주면 보이게 설정

 

/* hide content */
.content {
	display: none;
}
.tab-btn.active {
	background: var(--clr-white);
}
.content.active {
	display: block;
}

 

[JS]

 

- button 에 추가한 data-id (target.dataset) 을 가지고 data-id 와 동일한 id 를 가지고 있는 내용물 활성화

 

const btns = document.querySelectorAll(".tab-btn"); // html collections
const about = document.querySeletor(".about");
const aricles = document.querySeletor(".content");

function onClickAbout(event) {
    const id = event.target.dataset.id; // hmtl 에서 추가한 data-id
    if (id) {
    	// 해당버튼 이외의 다른 버튼들 비활성화 시키기
        btns.forEach(function (btn) {
            btn.classList.remove("active"); // 모두 없애고
            event.target.classList.add("active"); // 해당 버튼 추가
        });
       	// 다른 버튼의 내용물 비활성화 시키기
        article.forEach(function(article) {
            article.classList.remove("active"); // 모두 없애고
        });
        const activeArticle = document.getElementById(id);
        activeArticle.classList.add("active"); // 해당 버튼의 내용물 추가
    }
}

about.addEventListener("click",onClickAbout);

 

 

 

---

느낀점

 

semantic tag 를 사용하는 것이 다른사람이 보기에 의미전달에 더 유리하기에 잘 활용해야겠다는 생각이 들었다.

 

나는 처음에 tab 버튼과 content 컨테이너가 같이 하나로 묶여있는 구조로 생각하고 있었다. 하지만 실제 구현했을 때 

tab 버튼은 tab 버튼끼리 컨테이너화 시켰고 content 는 content 끼리 컨테이너화 시켜 코드를 구성하였다.

 

 tab 키를 눌러 화면에 활성화 시킬 때 classList 에 active 라는 클래스를 추가하는 것으로 구성되어있음을 알게되었다.