상품 상세 페이지 Tab 버튼 만들기

• html

  <div class="container mt-5">
    <ul class="list">
      <li class="tab-button orange">Products</li>
      <li class="tab-button">Information</li>
      <li class="tab-button">Shipping</li>
    </ul>
    <div class="tab-content show">
      <p>상품설명입니다. Product</p>
    </div>
    <div class="tab-content ">
      <p>스펙설명입니다. Information</p>
    </div>
    <div class="tab-content">
      <p>배송정보입니다. Shipping</p>
    </div>
  </div>

• css
• tab-button을 클릭 시 현재 클릭만 tab-button에 orange클래스를 추가
• tab-content에 show 클래스 부착

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;
}

.orange {
  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;
}

.show {
  display: block;
} 

 

 

 

1. 1번째 버튼을 클릭하면, 전체 tab-button orange 클래스 제거
2. 해당 버튼에 orange 클래스 추가
3. 전체 tab-content show 클래스 제거
4. 버튼에 해당하는 tab-content에 show 클래스 추가

$(".tab-button").eq(0).on("click", () => {
      $(".tab-button").removeClass("orange");
      $(".tab-button").eq(0).addClass("orange"); 
      $(".tab-content").removeClass('show');
      $(".tab-content").eq(0).addClass('show');
    })

    $(".tab-button").eq(1).on("click", () => {
      $(".tab-button").removeClass("orange");
      $(".tab-button").eq(1).addClass("orange"); 
      $(".tab-content").removeClass('show');
      $(".tab-content").eq(1).addClass('show');
    })

    $(".tab-button").eq(2).on("click", () => {
      $(".tab-button").removeClass("orange");
      $(".tab-button").eq(2).addClass("orange"); 
      $(".tab-content").removeClass('show');
      $(".tab-content").eq(2).addClass('show');
    })

 

 

• 반복 되는 부분을 변수와 함수로 바꾸기 (최적화)

const tabButton = $(".tab-button");
const tabContent = $(".tab-content");

function openTab(index) {
    tabButton.removeClass('orange');
    tabButton.eq(index).addClass('orange');
    tabContent.removeClass('show');
    tabContent.eq(index).addClass('show');
}

 

• 변경하기

tabButton.eq(0).on("click", () => {
	openTab(0);
})

tabButton.eq(1).on("click", () => {
	openTab(1);
})

tabButton.eq(2).on("click", () => {
	openTab(2);
})

 

 

 

 

• 이벤트 버블링을 이용하여 각 버튼에 클릭 이벤트를 정의하지 않고, 상위 요소에 클릭 이벤트가 전파 되는 것을 활용하여 변경하기
• 각 tab-button을 클릭하면 해당 상위요소로도 이벤트가 전파 되기 때문에 아래와 같이 비교하여 Tab 활용가능

    $('.list').click((e) => {
      if ($(e.target).is(tabButton.eq(0))){openTab(0);}
      if ($(e.target).is(tabButton.eq(1))){openTab(1);}
      if ($(e.target).is(tabButton.eq(2))){openTab(2);}
    });

• $(e.target).is(tabButton.ea(0))
  • 위와 같이 비교하는 이유는 제이쿼리로 해당 요소를 가져오게 된다면, 태그를 반환해주는 것이 아니라 제이쿼리 객체로 반환해주기 때문데 e.target 부분도 $()로 감싸서 비교를 해주어야지 잘 적용 된다.