[코딩온] 웹개발자 풀스택 과정 4주차 회고 | JavaScript - 탭메뉴(classList)

웹페이지에 사용 되는 탭메뉴(tabs menu)의 구현방식에 대해 알아보자

html 및 JavaScript 코드

<div class="tab_menu">
	<ul class="list">
    	<li class="active">
        	<a href="#tab1" class="btn">Tab 버튼1</a>
        	<div id="tab1" class="cont">Tab 컨텐츠1</div>
        </li>
        <li>
        	<a href="#tab2" class="btn">Tab 버튼2</a>
            <div id="tab2" class="cont">Tab 컨텐츠2</div>
        </li>
        <li>
        	<a href="#tab3" class="btn">Tab 버튼3</a>
           	<div id="tab3" class="cont">Tab 컨텐츠3</div>
    	</li>
 	</ul>
 </div>

<script>
const tabList = document.querySelectorAll('.tab_menu .list li');

for(let i = 0; i < tabList.length; i++){
	tabList[i].querySelector('.btn').addEventListener('click', function(e){
	e.preventDefault();
	for(let j = 0; j < tabList.length; j++){
    	tabList[j].classList.remove('active');
        }
       	this.parentNode.classList.add('active');
       });
   	}
</script>

e.preventDefault()

a링크 태그를 클릭했을 때의 의 기본 동작은 링크 이동이다. 그 클릭 기본 동작을 방지하는 모습이다.

다른 예로 button의 submit타입에서도 기본동작을 방지해서 새로고침을 막는 역할을 한다.

기본 클릭 동작을 방지하는 역할로 설명할 수 있다.

classList - 메서드

add( String [, String [, ...]] )
지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String [, String [, ...]] )
지정한 클래스 값을 제거한다.
노트: 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않습니다.

item( Number )
콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String [, force] )
하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

contains( String )
지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

replace( oldClass, newClass )
존재하는 클래스를 새로운 클래스로 교체한다.

결론

탭 메뉴의 원리 및 기능을 html,css 그리고 자바스크립트로 구현해봤다.
classList 메서드를 통한 응용 연습이 많이 필요할 것 같다.

참고

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
https://developer.mozilla.org/ko/docs/Web/API/Element/classList