29일차 - js 탭! (웹기능사시험용)

웹 기능사 시험볼 때, 가장 먼저 공통 클래스 지정!

1. HTML

1-1. 에밋

1-2. 공통 클래스 너비 추가

1-3. 공통 클래스 d-flex 추가

1-4. 포지션 abs / rel

---

2. CSS

2-1. top: 100% left: 0

2-2. ul의 엄마 li에 클래스 .show 추가

2-3. 제이쿼리 remove/add Class

2-3-1) li 안의 h3 클릭 시,

• li 클래스 show 제거
• (클릭 이벤트 발생한) h3의 부모인 li에 클래스 show 추가

2-3-2) HTML에 클래스 show 직접 추가해두기

2-4. li.notice인 ul(공지사항)

• li.show를 가지는 ul{ display: flex; }

• li.notice를 가지는 ul의 flex-direction : 세로방향(공지사항)

---

+) 제이쿼리 아닌, 바닐라 자바스크립트 (ft. 데이터셋)

강사님 소스

<script>

// 데이터셋과 아이디만 맞춰주면 작동함
const tabItem = document.querySelectorAll(".tab-container__item");
const tabContent = document.querySelectorAll(".content-container__content");

tabItem.forEach((item) => {
  item.addEventListener("click", tabHandler);
});

function tabHandler(item) {
  const tabTarget = item.currentTarget;
  const target = tabTarget.dataset.tab;
  tabItem.forEach((title) => {
    title.classList.remove("active");
  });
  tabContent.forEach((target) => {
    target.classList.remove("target");
  });
  document.querySelector("#" + target).classList.add("target");
  tabTarget.classList.add("active");
}

</script>