JavaScript를 사용해 탭을 만들어보자
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./tab.css">
</head>
<body>
<!-- 탭 메뉴 -->
<div>
<div class="tab" id="tab1">탭 1</div>
<div class="tab" id="tab2">탭 2</div>
<div class="tab" id="tab3">탭 3</div>
</div>
<!-- 탭 콘텐츠 -->
<hr>
<div class="tab-content" id="content1">콘탠츠 1</div>
<div class="tab-content" id="content2">콘탠츠 2</div>
<div class="tab-content" id="content3">콘탠츠 3</div>
<script src="./tab.js"></script>
</body>
</html>
탭 메뉴와 탭 콘텐츠에 해당하는 영역을 <div>로 정했다.
각 탭 메뉴에는 동일한 클래스와 다른 id가 지정되어 있으며 이는 탭 콘텐츠도 동일하다.
클래스와 id를 지정함으로써 다양하게 접근할 수 있게 되었다.
 |
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.tab {
font-size: 25px;
border: 2px solid gray;
margin: 10px;
display: inline-block;
}
.tab-content {
border: 1px solid darkgrey;
font-size: 30px;
display: inline-block;
}
.active {
color: blue;
background-color: gray;
}
CSS 초기화를 해주고, '. tab'과 'tab-content'에 'inline-block'을 적용시켜 가로 정렬 시켰다.
'. active'는 JavaScript에 사용될 클래스다. 색상과 배경을 변경시켜 준다.
 |
JavaScript
//1. 셀렉트
let tabs = document.querySelectorAll(".tab"); //'.tab' 요소를 모두 불러와 반환함
// console.log(tabs.length);
//2. 이벤트 생성
//반복문으로 tabs의 모든 요소에 이벤트 할당
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", tabIdCalculator) //클릭 시 함수 호출
}
function tabIdCalculator() {
//클릭한 요소(this)의 id에서 마지막 문자를 반환함
let tabId = "content" + this.id.charAt(this.id.length - 1);
console.log("tabId = " + tabId);
activateTab(this); //클릭한 요소(this)를 해당 함수에 인자로 넘김
showTabContent(tabId); //변수 'tabId'를 해당 함수에 인자로 넘김
}
//초기 탭 설정
activateTab(tabs[0]);
showTabContent('content1');
//3. 함수 생성
//클릭한 요소(this)를 매개변수'tab'으로 받아 사용함
function activateTab(tab) {
for (let i = 0; i < tabs.length; i++) {
tabs[i].className = 'tab'; //클래스 이름 초기화
}
tab.className = "tab active"; //클릭한 요소의 기존 class를 제거하고 새로운 class를 지정한다.
}
//tabId를 인자로 받고 그 값으로 TabContent의 속성(display)을 변경하는 함수
function showTabContent(tabId) {
let contents = document.querySelectorAll(".tab-content"); //'.tap-content' 요소를 모두 불러와 반환함
//반복문으로 모든 contents 숨기기
for (let i = 0; i < contents.length; i++) {
contents[i].style.display = "none";
}
let activeContent = document.querySelector("#" + tabId); //문자열 "#"에 인자로 받은 tabId를 결합하여 해당 id를 가진 요소를 선택한다.
if (activeContent) { //해당 변수가 존재하면 해당 요소의 display 속성을 block으로 변경한다.
activeContent.style.display = "block";
}
}
하나하나 뜯어서 설명하겠다.
//1. 셀렉트
let tabs = document.querySelectorAll(".tab"); //'.tab' 요소를 모두 불러와 반환함
// console.log(tabs.length);
우선 전역 변수로 사용할 'tabs'를 선언한다. 'tabs'는 모든 '. tab' 요소를 포함한 'NodeList'이다.
//2. 이벤트 생성
//반복문으로 tabs의 모든 요소에 이벤트 할당
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", tabIdCalculator) //클릭 시 함수 호출
}
function tabIdCalculator() {
//클릭한 요소(this)의 id에서 마지막 문자를 반환함
let tabId = "content" + this.id.charAt(this.id.length - 1);
console.log("tabId = " + tabId);
activateTab(this); //클릭한 요소(this)를 해당 함수에 인자로 넘김
showTabContent(tabId); //변수 'tabId'를 해당 함수에 인자로 넘김
}
다음으로 이벤트를 생성한다.
반복문으로 'tabs'의 모든 요소에 이벤트를 할당한다. 이벤트는 클릭 시 'tabIdCalculator()' 함수를 호출한다.
이벤트로 호출 된 'tabIdCalculator()' 함수는 클릭한 요소의 id에서 마지막 문자를 추출하여 'tabId'를 생성하고, 이 값을 다른 두 함수인 'activateTab()'과 'showTabContent()'에 넘긴다.
//초기 탭 설정
activateTab(tabs[0]);
showTabContent('content1');
해당 함수의 초기값을 설정한다.
//클릭한 요소(this)를 매개변수'tab'으로 받아 사용함
function activateTab(tab) {
for (let i = 0; i < tabs.length; i++) {
tabs[i].className = 'tab'; //클래스 이름 초기화
}
tab.className = "tab active"; //클릭한 요소의 기존 class를 제거하고 새로운 class를 지정한다.
}
'activateTab()' 함수는 'tabIdCalculator()' 함수에서 넘겨 받은 (this)를 매개 변수 'tab'으로 받아 사용한다.
반복문을 사용 해 'tabs'의 모든 요소의 클래스를 초기값인 'tab'으로 설정한다.
'tab'의 기존 클래스 'tab'을 제거하고 'tab active'을 클래스로 지정한다. CSS에서 만들어 둔 스타일을 적용시킨다.
//tabId를 인자로 받고 그 값으로 TabContent의 속성(display)을 변경하는 함수
function showTabContent(tabId) {
let contents = document.querySelectorAll(".tab-content"); //'.tap-content' 요소를 모두 불러와 반환함
//반복문으로 모든 contents 숨기기
for (let i = 0; i < contents.length; i++) {
contents[i].style.display = "none";
}
let activeContent = document.querySelector("#" + tabId); //문자열 "#"에 인자로 받은 tabId를 결합하여 해당 id를 가진 요소를 선택한다.
if (activeContent) { //해당 변수가 존재하면 해당 요소의 display 속성을 block으로 변경한다.
activeContent.style.display = "block";
}
}
'showTabContent()' 함수는 'tabId'를 인자로 받고 그 값으로 탭 콘텐츠의 속성(display)을 변경한다.
'.tap-content' 요소를 모두 선택해 변수 'contents'에 저장한다.
반복문을 사용해 모든 'content'요소를 숨긴다.
문자열 "#"에 인자로 받은 'tabId'를 결합해 해당 id를 가진 요소를 선택해 변수 'activeContent'에 저장한다
조건문을 사용해 'activeContent' 변수가 존재한다면 해당 요소의 'display' 속성을 'block'으로 변경한다.
 |
'연습 > JS' 카테고리의 다른 글
| JS - drag and drop 연습 (0) | 2024.09.03 |
|---|---|
| JS - 기초 랠리 (0) | 2024.08.29 |
| JS - 슬라이드 (0) | 2024.08.26 |
| JS - 배경 색상 변경 (0) | 2024.08.23 |
| JS - 여행 준비물 검사 목록 (0) | 2024.08.21 |
