탭메뉴 클릭시
탭메뉴 기능과 하이라이트 부분이 움직이는 기능을
만들어 보았습니다.
<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">
Lorem Ipsum is simply dummy text of the printin
g and typesetting industry. Lorem Ipsum has been the ind
ustry's standard dummy text ever since the 1500s, when a
n unknown printer took a galley of type and scrambled it
to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic types
etting, remaining essentially unchanged. It was populari
sed in the 1960s with the release of Letraset sheets conta
ining Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</div>
<div id="tabs-2">
Contrary to popular belief, Lorem Ipsum is not sim
ply random text. It has roots in a piece of classic
al Latin literature from 45 BC, making it over 2000 y
ears old. Richard McClintock, a Latin professor at Ham
pden-Sydney College in Virginia, looked up one of the more
obscure Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical literatu
re, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum
" (The Extremes of Good and Evil) by Cicero, written in 45 BC. T
his book is a treatise on the theory of ethics, very popular durin
g the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit a
met..", comes from a line in section 1.10.32.
</div>
<div id="tabs-3">
There are many variations of passages of Lorem Ipsu
m available, but the majority have suffered alterat
ion in some form, by injected humour, or randomised wo
rds which don't look even slightly believable. If you ar
e going to use a passage of Lorem Ipsum, you need to be su
re there isn't anything embarrassing hidden in the middle of t
ext. All the Lorem Ipsum generators on the Internet tend to repe
at predefined chunks as necessary, making this the
</div>
</div>
</div>html 에서 li 탭메뉴 버튼과 div 컨텐츠부분을 만들어줍니다.
const tabMenu = document.querySelectorAll('.tab-menu > li');
const tabContent = document.querySelectorAll('#tab-content > div');
const hightLight = document.querySelector('.highlight');
tabMenu.forEach((item,idx)=>{
item.addEventListener('click',function(e){
e.preventDefault();
showContent(idx);
moveHighlight(idx);
})
function showContent(num) {
tabContent.forEach((item,idx)=>{
item.style.display='none';
tabContent[num].style.display = 'block'
})
}
function moveHighlight(num) {
var newLeft = tabMenu[num].offsetLeft;
var newWidth = tabMenu[num].offsetWidth;
hightLight.style.left = `${newLeft}px`;
hightLight.style.width = `${newWidth}px`;
}
})forEach 문을 사용하여
각 메뉴 클릭시 각 순서의 인자를 받는
showContent, moveHightlight 를 실행합니다.
showContent 함수에는 각 컨텐츠를 숨겨주고
인자를 받는 컨텐츠만 보이게 해줍니다.
moveHighlight 함수에는
newLeft 변수에 각 버튼메뉴의 left 값
newWidth 변수에 각 버튼의 width 값을 넣어주고,
움직이는 hightLight의 스타일에 left값, width 값을
newLeft, newWidth 로 설정해주면
각메뉴 클릭시 해당 메뉴버튼의 크기와 위치값에 맞게
움직이게 됩니다.
lbh_dev