Tab기능을 이용해서 원하는 Tab을 선택시 해당하는 화면 출력
1. querySelector로 클래스tab-item, 클래스tab-content-item을 가져온다.
2. selectItem() : 선택하는 함수
3. removeBorder() : tab하단 빨간줄 없애기
4. removeShow() : tab한 화면 없애기
5. item.addEventListener("click", selectItem)
tab기능을 이벤트함수를 이용해서 클릭후
->
모든 값은 함수 첫줄에서 초기화를 해야한다. 안그러면 중복되어서 나타남
->
forEach를 이용해서 하나씩 출력되게끔 구현
Source Code
const tabItems = document.querySelectorAll(".tab-item");
const tabContentItems = document.querySelectorAll(".tab-content-item");
// Select tab content item
function selectItem(e) {
// Add border to current tab
removeBorder();
this.classList.add("tab-border");
// Grap content item from DOM
const tabContentItem = document.querySelector(`#${this.id}-content`);
// Add show class
tabContentItem.classList.add("show");
}
function removeBorder() {
tabItems.forEach((item) => item.classList.remove("tab-border"));
}
function removeShow() {
tabContentItems.forEach((item) => item.classList.remove("show"));
}
// Listen for tab click
tabItems.forEach((item) => item.addEventListener("click", selectItem));