728x90
오늘은 자바스크립트를 활용하여 탭 레이아웃을 만들어 보겠습니다.
코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>탭 레이아웃 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tab 1</h3>
<p>Tab 1의 내용입니다.</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>Tab 2</h3>
<p>Tab 2의 내용입니다.</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>Tab 3</h3>
<p>Tab 3의 내용입니다.</p>
</div>
<script>
function openTab(evt, tabName) {
// 모든 탭 콘텐츠를 숨깁니다.
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// 모든 탭 링크에서 "active" 클래스를 제거합니다.
var tablinks = document.getElementsByClassName("tablinks");
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// 클릭된 탭을 보여주고, 탭 링크에 "active" 클래스를 추가합니다.
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
style.css
/* 탭 링크 스타일 */
.tab button {
background-color: #f1f1f1;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* 탭 링크 - 마우스 호버 시 */
.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;
}
결과입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 반응형 내비게이션 바 만들기 (0) | 2024.04.01 |
|---|---|
| [JavaScript] CoinGecko API 와 chart api를 사용하여 기간에 따른 암호화폐 가격 변동을 라인 차트로 표시하기 (0) | 2024.03.28 |
| [JavaScript] 리뷰 만들기 (0) | 2024.03.23 |
| [JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 (0) | 2024.03.22 |
| [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 (0) | 2024.03.19 |
