<div class="wrap">
<!-- 카테고리 버튼 -->
<div class="category">
<div>all</div>
<div>category01</div>
<div>category02</div>
<div>category03</div>
</div>
<!-- 요소 -->
<div>
<ul class="videoWrap displayFlex flexWrap">
<li class="openBtn category01"></li>
<li class="openBtn category02"></li>
<li class="openBtn category03"></li>
<li class="openBtn category02"></li>
<li class="openBtn category01"></li>
<li class="openBtn category03"></li>
<li class="openBtn category01"></li>
<li class="openBtn category03"></li>
<li class="openBtn category02"></li>
</ul>
</div>
</div>
/* reset */
ul { list-style: none; }
div, ul, li { margin: 0; padding: 0; }
/* category btn */
.wrap { width: 800px; margin: 0 auto; }
.wrap .category { display: flex; justify-content: space-Around; margin: 20px 0; }
.wrap .category div { width: 140px; padding: 10px; border-radius: 10px; text-align: center; cursor: pointer; }
.wrap .category div:nth-child(1) { background-color: #ff8181; }
.wrap .category div:nth-child(2) { background-color: #fff281; }
.wrap .category div:nth-child(3) { background-color: #81d1ff; }
.wrap .category div:nth-child(4) { background-color: #ff81a7; }
/* list */
.videoWrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; list-style: none }
.videoWrap li { display: none; width: 240px; height: 100px; border-radius: 10px; }
.videoWrap li.category01 { background: #fff281; }
.videoWrap li.category02 { background: #81d1ff; }
.videoWrap li.category03 { background: #ff81a7; }
/* category class */
.on { display: block !important; }
/* category.js */
let categoryBtn = document.querySelectorAll(".category div")
let contents = document.querySelectorAll(".openBtn");
// 처음에는 전부 보이게
for(let i=0; i<contents.length; i++){
contents[i].classList.add("on");
}
/* all */
categoryBtn[0].addEventListener("click", function(){
for(let i=0; i<contents.length; i++){
if(contents[i].classList.contains("openBtn")==false){
contents[i].classList.remove("on");
console.log("실행");
}else {
contents[i].classList.add("on");
console.log("미실행");
}
}
});
/* green */
categoryBtn[1].addEventListener("click", function(){
for(let i=0; i<contents.length; i++){
if(contents[i].classList.contains("category01")==false){
contents[i].classList.remove("on");
}else {
contents[i].classList.add("on");
}
}
});
/* orange */
categoryBtn[2].addEventListener("click", function(){
for(let i=0; i<contents.length; i++){
if(contents[i].classList.contains("category02")==false){
contents[i].classList.remove("on");
}else {
contents[i].classList.add("on");
}
}
});
/* purple */
categoryBtn[3].addEventListener("click", function(){
for(let i=0; i<contents.length; i++){
if(contents[i].classList.contains("category03")==false){
contents[i].classList.remove("on");
}else {
contents[i].classList.add("on");
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.