<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial;
}
/*탭 스타일 */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* 탭버튼내부 스타일 */
.tab button {
/* 부모의 컬러 상속받음 */
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* 버튼호버 시 버튼배경변경 */
.tab button:hover {
background-color: #ddd;
}
/* 탭버튼이 눌렸을때 */
.tab button.active {
background-color: #ccc;
}
/* 탭컨텐츠 */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" data-city="London">London</button>
<button class="tablinks" data-city="Paris">Paris</button>
<button class="tablinks" data-city="Tokyo">Tokyo</button>
</div>
<div id="London" class="tabcontent active">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent ">
<h3>Paris</h3>
<p>Paris is the capital city of France.</p>
</div>
<div id="Tokyo" class="tabcontent ">
<h3>Tokyo</h3>
<p>Tokyo is the capital city of Japan.</p>
</div>
<script>
/* 01. 버튼요소 접근 */
const tabLinks = document.querySelectorAll(".tablinks");
/* 02. 버튼요소 배열의 각 요소에 접근 */
for (const tab of tabLinks) {
/* ----------------------탭------------------ */
/* 03.각 버튼을 클릭했을때 이벤트리스너 호출함수 */
tab.addEventListener('click', e => {
/* 04. 모든 버튼에 대한 active클래스 해제*/
for (const item of document.querySelectorAll(".tablinks")) {
item.classList.remove('active');
}
/* 05.클릭된 자기자신은 active클래스 추가(=적용) */
e.currentTarget.classList.add('active');
/* --------------------탭 컨텐츠------------------- */
/* 06.모든 컨텐츠클래스요소 배열의 각요소 접근 */
for (const txt of document.querySelectorAll(".tabcontent")) {
/* 07.각 컨텐츠클래스에 active클래스 제거*/
txt.classList.remove('active');
}
/* 08.클릭된 버튼에 적용된 'data-city' 값을 취득 */
const city = e.currentTarget.dataset.city;
/* 09.취득한 값을 id속성으로 사용하는 페이지에게 active클래스 적용 -> 화면에 표시 */
//dataset에서 취득한 값은 문자열이므로 getElementById()중가로 안에 따옴표는 생략해도 된다.
document.getElementById(city).classList.add('active');
});
}
</script>
</body>
</html>
냠소현 개발일지