tab button 만들기

html

• list를 만듦
• 설명부분을 만듦

<div class="container mt-5">
  <ul class="list">
    <li class="tab-button product-button">Products</li>
    <li class="tab-button active information-button">Information</li>
    <li class="tab-button shipping-button">Shipping</li>
  </ul>

  <div class="tab-content product-content">
    <p>상품설명입니다. Product</p>
  </div>
  <div class="tab-content show information-content">
    <p>상품정보입니다. Info</p>
  </div>
  <div class="tab-content shipping-content">
    <p>배송정보입니다. Shipping</p>
  </div>
</div>

css

• list를 옆으로 배치시킴
• list를 담는 ul에 border-bottom을 만듬
• 버튼을 클릭하면 class를 넣음
  • active
• 설명 div를 숨김
  • 버튼 클릭하면 class를 넣음

ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
ul.list::after {
  content: "";
  display: block;
  clear: both;
}
.tab-button {
  display: block;
  padding: 10px 20px 10px 20px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  color: grey;
  text-decoration: none;
  cursor: pointer;
}
.active {
  border-top: 2px solid orange;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid white;
  border-left: 1px solid #ccc;
  color: black;
  margin-top: -2px;
}
.tab-content {
  display: none;
  padding: 10px;
}
.show {
  display: block;
}

이벤트

• 버튼1 클릭하면, 버튼1에 active class추가, 설명1에 show 추가
• 나머지 버튼,설명(2,3)은 class를 제거해야함
• 결론 : 버튼1 클릭 -> 모든 버튼(1,2,3....) class 제거 -> 버튼 1에 class 추가

$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(0).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(0).addClass("show");
  });

$(".tab-button")
  .eq(1)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(1).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(1).addClass("show");
  });

$(".tab-button")
  .eq(2)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(2).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(2).addClass("show");
  });

확장성있는 코드로 수정

• 숫자 0,1,2만 변경되고, 나머지 부분은 동일
  • 반복문으로 변경가능

for (let i = 0; i < 3; i++) {
  $(".tab-button")
    .eq(i)
    .on("click", function () {
      $(".tab-button").removeClass("active");
      $(".tab-button").eq(i).addClass("active");

      $(".tab-content").removeClass("show");
      $(".tab-content").eq(i).addClass("show");
    });
}