[Javascript] 탭메뉴 만들기

 

이번엔 탭메뉴 만들기!

이번건 검색했을 때 여러가지 방법들이 많이 나와서 고민했다.

이런 저런 페이지들의 코드들을 보면서 어떤게 좋은 코드일까... 어떤게 나은 코드일까...

해보다가 결국 내 마음대로 섞어서 짜보았다(?) 🥸

내 코드는 forEach와 index를 사용한 코드이다.

 

---

 

Javascript 코드

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

// 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
tabItem.forEach((item, index) => {
  // 3. 탭 버튼에 클릭 이벤트를 준다.
  item.addEventListener("click", (e) => {
    // 4. 버튼을 a 태그에 만들었기 때문에, 
    // 태그의 기본 동작(링크 연결) 방지를 위해 preventDefault를 추가한다.
    e.preventDefault(); // a 
    
    // 5. 탭 내용 부분들을 forEach 문을 통해 한번씩 순회한다.
    tabContent.forEach((content) => {
      // 6. 탭 내용 부분들 전부 active 클래스를 제거한다.
      content.classList.remove("active");
    });

    // 7. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
    tabItem.forEach((content) => {
      // 8. 탭 버튼들 전부 active 클래스를 제거한다.
      content.classList.remove("active");
    });

    // 9. 탭 버튼과 탭 내용 영역의 index에 해당하는 부분에 active 클래스를 추가한다.
    // ex) 만약 첫번째 탭(index 0)을 클릭했다면, 같은 인덱스에 있는 첫번째 탭 내용 영역에
    // active 클래스가 추가된다.
    tabItem[index].classList.add("active");
    tabContent[index].classList.add("active");
  });
});

 

결과물

 

See the Pen Untitled by Happy Hee (@8happyhee) on CodePen.

 

 

 

 

사실 이것보다 더 좋은 코드가 있을 것 같은데

(내가 짠건 index를 사용한 코드라서 탭의 추가나 제거가 이루어 질 때 잘못하면 꼬일 수도 있을 것 같다.🥲)

 

공부하면서 더 좋은 코드를 짤 수 있게 된다면 그때 수정하러 와야겠다!

 

같은 index인 탭버튼과 탭내용을 보여주는 것이 아닌,

탭버튼의 id 값을 가져와서 동일한 id인 탭내용을 보이게 하는 코드도 짜봤다!

 

만드는 방법은 아래 링크에... 🤗

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

 

 

 

- 끝 -