[JS] Tab Menu - 에이블런 프론트엔드부트캠프 12일차

 

완성 영상

    <section id="tab">
        <!-- 버튼그룹 -->
        <ul>
            <!-- 페이지를 로딩했을 때 활성화되어있는 버튼과 탭박스 -->
            <li class="on">
                <a href="#">button1</a>
            </li>
            <li>
                <a href="#">button2</a>
            </li>
            <li>
                <a href="#">button3</a>
            </li>
        </ul>

        <!-- 탭박스 그룹 -->
        <article>
            <!-- 페이지를 로딩했을 때 활성화되어있는 탭박스 -->
            <div class="on">Tab1</div>
            <div>Tab2</div>
            <div>Tab3</div>
        </article>
    </section>

const tab = document.querySelector("#tab");
const btns = tab.querySelectorAll("ul li");
const boxs = tab.querySelectorAll("article div");

// arr 매개변수는 필요 없기 때문에 삭제 가능
// forEach로 반복하며 버튼에 클릭이벤트 등록
btns.forEach((el, idx) => {
    el.addEventListener("click", event => {
    	// 모든 버튼에 on을 제거하여 활성화
        for (let el of btns) {
            el.classList.remove("on");
        }

        // 클릭한 요소만 on 추가하여 활성화
        el.classList.add("on");

		// 모든 박스 비활성화
        for (let el of boxs) {
            el.classList.remove("on");
        }
	
    	// 해당 박스 활성화
        boxs[idx].classList("on");
    })
})

 

JS로 On 클래스를 li와 div에 주면서 탭메뉴를 만들었다. 수업시간에서는 forEach문을 활용해 코드를 작성했다. 그리고 유사한 형태의 코드가 두 번 반복되어 이를 하나로 묶으면 좋을 것 같았다. 이를 해결하기 위해서는 표준 for문을 사용해서 인덱스값을 통일하여 개발하는 것이 효율적이라 생각해 표준 for문을 사용해 개발해보았다.

const btns = document.querySelectorAll("#tab ul li");
const boxs = document.querySelectorAll("#tab article div");

// get buttons length
let btn_len = btns.length;

// 이벤트리스너 등록
for (let i = 0; i < btn_len; i++) {
    btns[i].addEventListener("click", e => {
    	// activation 함수 호출
        activation(btns, i);
        activation(boxs, i);
    })
}

// on 클래스 전체 제거 및 클릭된 요소 on 클래스 부여
function activation(list, idx){
    for (let el of list) {
        el.classList.remove("on");
    }

    list[idx].classList.add("on");
}

 

표준 for문을 활용해서 인덱스값을 통일했고, 유사한 형태의 코드를 함수화하여 코드의 재사용성을 높여줬다.