[Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기)

 

 

예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다.

https://happy-hee8.tistory.com/3

 

 

그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데

새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다.

이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다.

 

개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다.

이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고,

id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다.

 

---

 

Javascript 코드

// 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.
const tabItem = document.querySelectorAll(".tab__item");
const tabContent = document.querySelectorAll(".tab__content");

// 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
tabItem.forEach((item, index) => {
  // 탭 버튼에 클릭 이벤트를 준다.
  item.addEventListener("click", (e) => {
    // 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
    tabItem.forEach((item) => {
      // 탭 버튼들의 active 클래스를 제거한다.
      item.classList.remove("active");
    });
    // 클릭한 index의 탭 버튼에 active 클래스를 추가한다.
    tabItem[index].classList.add("active");
    
    // 탭 버튼의 id값을 string으로 가져온다.
    const tabItemId = String(item.id);
    // 탭 내용 부분들을 forEach 문을 통해 한번씩 순회한다.
    tabContent.forEach((item, index) => {
      // 탭 내용 부분들 전부 active 클래스를 제거한다.
      item.classList.remove("active");

      // 탭 내용의 id값을 string으로 가져온다.
      const tabContentId = String(item.id);
      // 만약 탭 버튼의 id 값과 탭 내용의 id값이 같다면,
      // 해당 탭 내용에 active 클래스를 추가한다.
      if(tabContentId === tabItemId) {
        tabContent[index].classList.add("active");
      }
    });
  });
});

 

 

결과물

 

See the Pen Untitled by dahee kim (@dahee-kim) on CodePen.

 

 

 

다른 사람의 도움 없이 스스로 짜봤던 코드라서인지,

코드가 작동했을 때 꽤나 뿌듯했던 것 같다. 재밌었다! :)

 

 

- 끝 -