// 1. 셀렉
let tab = document.querySelectorAll(".tab");
let contents = document.querySelectorAll(".tab_content");
console.log(tab);
console.log(contents);
// 이벤트 할당
for (let i = 0; i < tab.length; i++) {
tab[i].addEventListener("click", showTabContent);
}
// 함수 선언하기
function showTabContent() {
let tabClass = this.id;
contents.forEach(function (content) {
if (tabClass === "all" || content.classList.contains(tabClass)) {
content.style.display = "block";
} else {
content.style.display = "none";
}
});
}
'HTML & CSS 연습 > Fruitables' 카테고리의 다른 글
fruit (0) | 2025.04.25 |
---|---|
fruit_js (0) | 2025.04.20 |
fruit_연습 (0) | 2025.04.19 |
Fruitables (2) | 2025.04.18 |