| JavaScript | tab기능구현하기 ( 함수로 축약, dataset기능)

웹 페이지에 이런 탭기능이 있는 것을 진짜 많이 볼 수 있었다.! 

( 이렇게 ul 안에 li 요소를 누르면 해당되는 내용까지 볼 수 있게 구현하는 것이다.)

<div class="container mt-5">
      <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button orange">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>
</div>

---

1. 냅다 막 넣어보기

const tabBtn = document.querySelectorAll(".tab-button");
const tabCont = document.querySelectorAll(".tab-content");

for (let i = 0; i < tabBtn.length; i++) {
        for (let j = 0; j < tabBtn.length; j++) {
          tabBtn[i].addEventListener("click", () => {
            tabBtn[j].classList.remove("orange");
            tabBtn[i].classList.add("orange");
            tabCont[j].classList.remove("show");
            tabCont[i].classList.add("show");
          });
  }
}

 

2. 함수로 축약하기 

for (let i = 0; i < tabBtn.length; i++) {
        for (let j = 0; j < tabBtn.length; j++) {
          tabBtn[i].addEventListener("click", () => {
            탭기능(i, j);
          });
        }
}

function 탭기능(a, b) {
     // 순서 주의! 지우고 추가
        tabBtn[b].classList.remove("orange");
        tabBtn[a].classList.add("orange");
        tabCont[b].classList.remove("show");
        tabCont[a].classList.add("show");
}

 

dataset 문법 

: html 안에 유저 몰래 정보를 숨겨놓을 수 있습니다.

data-작명="값" 데이터이름 아무렇게나 작명하고 값도 넣으면 됩니다. 일반 유저들은 모름

이벤트리스너 적게 사용할 때 내가 뭐 눌렀는지 쉽게 파악할 수도 있음

<ul class="list">
        <li class="tab-button" data-id="0">Products</li>
        <li class="tab-button orange" data-id="1">Information</li>
        <li class="tab-button" data-id="2">Shipping</li>
</ul>

    $(".list").click(function (e) {
        탭열기(e.target.dataset.id);
      });

      function 탭열기(i) {
        $(".tab-button").removeClass("orange");
        $(".tab-button").eq(i).addClass("orange");
        $(".tab-content").removeClass("show");
        $(".tab-content").eq(i).addClass("show");
      }