자바스크립트로 tab기능 만들기

순수 자바스크립트로 tab기능을 만들어 보았다

 

1. ui 만들기

[HTML]

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

<div class="tab-content">
  <p>상품설명입니다. Product</p>
</div>
<div class="tab-content">
  <p>상품정보입니다. Info</p>
</div>
<div class="tab-content">
  <p>배송정보입니다. Shipping</p>
</div>
<div class="tab-content">
  <p>배송정보입니다. Shipping</p>
</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;
}
.tab-button.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;
}
.tab-content.show {
	display: block;
}
.tab-content.hide{
    display:none;
}

 

2. js 코드 짜기

[Javascript]

<script>
    let list = document.querySelector('.list');
    let tabBtn = document.querySelectorAll('.tab-button');
    let tabContent = document.querySelectorAll('.tab-content');


    function openTab(i) {
      for (let j = 0; j < tabBtn.length; j++) {
        tabBtn[j].classList.remove('active');
        tabContent[j].classList.remove('show');
      }
      tabBtn[i].classList.add('active');
      tabContent[i].classList.add('show');
    };

    list.addEventListener('click', function (e) {
      openTab(e.target.getAttribute('data-id'));
      //e.target.getAttribute() : 선택한 요소의 id값
    });
  </script>

 

💡 기능 설명

➤ querySelector() : 해당하는 id나 class 요소를 찾아준다. 만약 같은 id나 class가 있을경우 최상단의 요소만 선택한다.

➤ querySelectorAll() : querySelector과 비슷한 기능이지만 배열과 비슷한 객체인 nodeList를 반환한다. 위의 예시에선        querySelectorAll('.tab-button')일 경우 class가 tab-button인 요소를 nodeList에 넣어 배열처럼 반환해주기때문에 for문 또는 forEach문을 사용 하여 활용해야한다.

➤ classList.add() & .remove() : 요소의 class를 추가하거나 삭제해준다.

➤ .target : 클릭한 요소를 선택 할 수 있다.

➤ getAttribute() : 요소의 속성을 가져올 수 있다.