[javascript] 탭 버튼에 클릭시 해당 컨텐츠 노출하기

 

탭버튼 클릭시 해당 컨텐츠 노출하는 방식은 흔하게 웹사이트에서 쓰는 동적인 움직임이다.

Jquery로 처리하면 간단하긴 하지만 순수 JS로 처리해도 어렵지 않음으로 속도가 빠른 JS로 처리하는것을 추천한다.

위와 같은 형식으로 자주 볼 수 있는 ui/ux

 

 

HTML 마크업 구조

- current 란 클래스를 가진 button에는 스타일이 적용되며 다른 버튼은 스타일이 사라짐.

- current 란 클래스를 가진 content는 노출되며 다른 컨텐츠는 숨김

<!-- 탭버튼 -->
<div class="tab-wrap">
    <button type="button" class="tab current">TAB 1</button>
    <button type="button" class="tab">TAB 2</button>
    <button type="button" class="tab">TAB 3</button>
</div>
<!--...탭버튼 -->

<!-- 컨텐츠 -->
<div class="cont-wrap>
	<div class="cont current" id="cont1">
    	<h2>Tab1's content</h2>
    </div>
    <div class="cont" id="cont2">
    	<h2>Tab2's content</h2>
    </div>
    <div class="cont" id="cont3">
    	<h2>Tab3's content</h2>
    </div>
</div>
<!--...컨텐츠 -->

 

 

자바스크립트(JS)작성

//탭버튼과 컨텐츠 querySelectorAll로 유사배열화
const tabBtn = document.querySelectorAll(".tab");
const contBox = document.querySelectorAll(".cont");

for(let i = 0; i < tabBtn.length; i++) {
	//탭버튼 클릭 이벤트
	tabBtn[i].onclick = function() {
    	const activeClass = "current";
    
        //탭버튼 forEach 처리
        tabBtn.forEach(function(tabBtns){
            tabBtns.classList.remove(activeClass);
        });

        //컨텐츠 forEach 처리
        contBox.forEach(function(contBoxs){
            contBoxs.classList.remove(activeClass);
        });

		//클릭한 버튼 class적용 및 컨텐츠 노출 클래스 적용
        this.classList.add(activeClass);
        contBox[i].classList.add(activeClass);
    }
}

 

 

여러페이지에서 여러번 쓸 수 있는 가능성이 높은 기능이기때문에 아래와 처럼 함수(function)화하여 쓰면 재활용하기 매우 용이하다

        //탭버튼,컨텐츠 const선언
        const tabBtn = document.querySelectorAll(".tab");
        const contBox = document.querySelectorAll(".cont");
        
        //함수 실행
        tabAndCont(tabBtn,contBox);
        
        //함수화
        function tabAndCont(tab, cont) {
            for (let i = 0; i < tab.length; i++) {
                tab[i].onclick = function () {
                    const currentClass = "current";

                    tab.forEach(function (tabs) {
                        tabs.classList.remove(currentClass);
                    });

                    cont.forEach(function (conts) {
                        conts.classList.remove(currentClass);
                    });

                    this.classList.add(currentClass);
                    cont[i].classList.add(currentClass);
                }
            }
        }