<!DOCTYPE html>
<html lang="ko">
<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>
.tab-wrapper{
width:960px;
margin:auto;
}
.tab-menu{
padding-left: 0;
position: relative;
z-index:1;
}
.tab-menu li{
float:left;
list-style:none;
margin-right:10px;
}
.tab-menu:after{content:""; display:block; clear:both;}
.tab-menu li a{
color:#999;
text-transform: uppercase;
font-weight: bold;
line-height: 27px;
text-decoration: none;
padding: 0 20px;
display: block;
}
#tab-content{
min-height:300px;
}
#tab-content > div{
display: none;
}
#tab-content > div:first-child{
display: block;
}
.tab-menu li a.active{
color:#fff;
}
.nav{
position: relative;
}
.highlight{
position: absolute;
width:98px;
top:0;
left:0;
bottom:0;
background: #000;
transition: 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
</style>
</head>
<body>
<div class="tab-wrapper">
<div class="nav">
<ul class="tab-menu">
<li><a href="#tabs-1">basic</a></li>
<li><a href="#tabs-2">advanced</a></li>
<li><a href="#tabs-3">expert</a></li>
</ul>
<span class="highlight"></span>
</div>
<div id="tab-content">
<div id="tabs-1">
<h2>baic plan</h2>
<p>첫번째 페이지 입니다.</p>
</div>
<div id="tabs-2">
<h2>advanced plan</h2>
<p>두번째 페이지 입니다.</p>
</div>
<div id="tabs-3">
<h2>expert plan</h2>
<p>세번째 페이지 입니다.</p>
</div>
</div>
</div>
<script>
const tabMenu = document.querySelectorAll('.tab-menu li');
const tabContent = document.querySelectorAll('#tab-content > div');
const highLight = document.querySelector('.highlight');
tabMenu.forEach(function(item, idx){
item.addEventListener('click', function(e){
e.preventDefault();
showContent(idx);
moveHighLight(idx);
});
});
function showContent(num){
tabContent.forEach(function(item){
item.style.display = 'none';
});
tabContent[num].style.display = 'block';
};
function moveHighLight(num){
const newLeft = tabMenu[num].offsetLeft;
const newWidth = tabMenu[num].offsetWidth;
console.log(newWidth);
highLight.style.left = newLeft + 'px';
highLight.style.width = newWidth + 'px';
}
</script>
</body>
</html>https://www.youtube.com/watch?v=c5uvAIxn07c
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT] 문법 정리 - 데이터 저장하기 (0) | 2021.08.11 |
|---|---|
| [JAVASCRIPT] clientX, offsetX, pageX, screenX (0) | 2021.08.11 |
| [Javascript] loading 페이지 넣기 (0) | 2021.07.24 |
| [Javascript] preventDefault (0) | 2021.07.20 |
| [Javascript] classList.toggle (0) | 2021.07.20 |
