웹 페이지에서 탭 메뉴나 버튼 그룹을 만들 때, 클릭된 요소만 시각적으로 강조하는 기능은 매우 자주 사용됩니다. JavaScript를 사용하면 클릭한 현재 요소에 활성(active) 클래스를 동적으로 추가하고, 기존에 활성 상태였던 요소에서는 해당 클래스를 제거할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #6ea2f0;
cursor: pointer;
color: white;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1>Active Button Example</h1>
<div id="sampleDiv">
<button class="btn">Giraffe</button>
<button class="btn active">Cow</button>
<button class="btn">Lion</button>
<button class="btn">Leopard</button>
<button class="btn">Cheetah</button>
</div>
<h2>위 버튼 중 하나를 누르면 해당 버튼에 active 클래스가 설정됩니다</h2>
<script>
var btns = document.querySelectorAll(".btn");
Array.from(btns).forEach(item => {
item.addEventListener("click", () => {
var selected = document.getElementsByClassName("active");
selected[0].className = selected[0].className.replace(" active", "");
item.className += " active";
});
});
</script>
</body>
</html>코드 동작 원리
위 코드가 어떻게 작동하는지 단계별로 살펴보겠습니다.
1. 버튼 요소 선택: document.querySelectorAll(".btn")을 사용하여 페이지 내 모든 .btn 클래스를 가진 버튼을 선택합니다.
2. 이벤트 리스너 등록: Array.from()으로 NodeList를 배열로 변환한 뒤, forEach()를 통해 각 버튼에 클릭 이벤트 리스너를 등록합니다.
3. 기존 활성 클래스 제거: 버튼을 클릭하면 먼저 getElementsByClassName("active")로 현재 활성 상태인 요소를 찾고, replace(" active", "")를 사용해 해당 요소에서 active 클래스를 제거합니다.
4. 새 활성 클래스 추가: 마지막으로 클릭된 버튼에 active 클래스를 추가합니다. CSS의 .active 선택자 덕분에 활성화된 버튼은 배경색이 진회색(#666)으로 변경되어 시각적으로 구별됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다. 초기 상태에서는 'Cow' 버튼에 active 클래스가 미리 적용되어 있습니다.
다른 버튼을 클릭하면 기존 버튼의 활성 상태가 해제되고, 클릭한 버튼에 활성 스타일이 적용되는 것을 확인할 수 있습니다.
참고: classList API 활용하기
문자열 치환 방식 대신 최신 브라우저에서 지원하는 classList API를 사용하면 더욱 안전하고 간결하게 클래스를 관리할 수 있습니다.
item.addEventListener("click", () => {
document.querySelector(".btn.active")?.classList.remove("active");
item.classList.add("active");
});classList.add(), classList.remove() 메서드는 공백 처리 오류 없이 클래스를 정확하게 추가·제거해 주므로, 실무에서는 이 방식을 사용하는 것이 좋습니다.