결과 이미지
HTML
먼저 HTML 구조를 작성합니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Bar Line Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tab-container">
<div class="tab" id="tab1" data-content="content1">Tab 1</div>
<div class="tab" id="tab2" data-content="content2">Tab 2</div>
<div class="tab" id="tab3" data-content="content3">Tab 3</div>
<div class="tab" id="tab4" data-content="content4">Tab 4</div>
<div class="tab-line"></div>
</div>
<div class="tab-content" id="content1">Content 1</div>
<div class="tab-content" id="content2">Content 2</div>
<div class="tab-content" id="content3">Content 3</div>
<div class="tab-content" id="content4">Content 4</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
탭과 애니메이션 효과를 위한 CSS를 작성합니다:
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.tab-container {
position: relative;
display: flex;
justify-content: space-around;
margin-bottom: 20px;
border-bottom: 2px solid #ddd;
}
.tab {
padding: 10px 20px;
cursor: pointer;
position: relative;
z-index: 1;
}
.tab:hover {
background-color: #f0f0f0;
}
.tab.active {
color: #007bff;
}
.tab-line {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #007bff;
transition: left 0.3s, width 0.3s;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
jQuery
탭을 클릭할 때 라인이 이동하고 내용을 전환하는 jQuery 코드를 작성합니다:
// script.js
$(document).ready(function() {
const $tabs = $('.tab');
const $tabLine = $('.tab-line');
function activateTab($tab) {
// 모든 탭과 콘텐츠의 활성 상태를 초기화
$tabs.removeClass('active');
$('.tab-content').removeClass('active');
// 클릭된 탭과 관련된 콘텐츠를 활성화
$tab.addClass('active');
$('#' + $tab.data('content')).addClass('active');
// 라인 애니메이션 적용
const tabOffset = $tab.position();
const tabWidth = $tab.outerWidth();
$tabLine.css({
left: tabOffset.left,
width: tabWidth
});
}
// 초기 상태: 첫 번째 탭 활성화
activateTab($tabs.first());
// 탭 클릭 이벤트 처리
$tabs.click(function() {
activateTab($(this));
});
});
반응형
'프로그램 > 탭(Tabs)' 카테고리의 다른 글
| Tab bar active animation (0) | 2024.03.26 |
|---|---|
| Navbar concept HTML / CSS only (0) | 2024.03.25 |
| Tab Bar Menu Animation (0) | 2024.03.22 |
| Tab bar animation - Only CSS (0) | 2024.03.21 |
| tab bar animation (0) | 2024.03.20 |
댓글