[JavaScript]탭메뉴 만들기(반복문)

[JavaScript]탭메뉴 만들기

html

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

css

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

js

/*버튼 0(Products)을 누르면  
0. 버튼0, 1 붙은 주황색 제거
0. 내용0,1,2 안보이게 하기
1. 버튼 0이 주황색으로 하이라이트가 되어야함
2. 내용 0이 보여야함*/

//함수 호출 반복문
for(let i = 0; i < $('.tab-button').length; i++){
    tabOpen(i); 
}

//함수에 보관
function tabOpen(e){
    $('.tab-button').eq(e).click(function(){
        $('.tab-button').removeClass('active');
        $('.tab-content').removeClass('show');
        $('.tab-button').eq(e).addClass('active');
        $('.tab-content').eq(e).addClass('show');
    });
}

<script src="js/tab.js"></script>