JS 기능

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));