탭기능 연습문제의 답을 저는 자바스크립트로 만들었는데요.
//JS
document.querySelectorAll(".tab-button")[0].addEventListener("click", function () {
document.querySelector(".orange").classList.remove("orange");
document.querySelectorAll(".tab-button")[0].classList.add("orange");
document.querySelector(".show").classList.remove("show");
document.querySelectorAll(".tab-content")[0].classList.add("show");
});
document.querySelectorAll(".tab-button")[1].addEventListener("click", function () {
document.querySelector(".orange").classList.remove("orange");
document.querySelectorAll(".tab-button")[1].classList.add("orange");
document.querySelector(".show").classList.remove("show");
document.querySelectorAll(".tab-content")[1].classList.add("show");
});
document.querySelectorAll(".tab-button")[2].addEventListener("click", function () {
document.querySelector(".orange").classList.remove("orange");
document.querySelectorAll(".tab-button")[2].classList.add("orange");
document.querySelector(".show").classList.remove("show");
document.querySelectorAll(".tab-content")[2].classList.add("show");
});
이렇게 코드를 짰을 때
//html
<div class="container mt-5">
<ul class="list">
<li class="tab-button">Products</li>
<li class="tab-button">Information</li>
<li class="tab-button">Shipping</li>
</ul>
<div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
information tab-button과 tab-content의 class에서 orange와 show를 지우고 코드를 실행시키면 jQuery의 removeClass()와 달리 classList가 null이라고 뜨면서 실행이 안되는데요.
그럼 jQuery쓰는 법 말고 자바스크립트로는 만드는 방법이 따로 없을까요?
