메뉴 이펙트 - 탭 메뉴
<div id="tab-menu">
<div class="tab-btn">
<ul>
<li class="active"><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a></li>
<li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul>
</div>
<div class="tab-cont">
<div>
<h2>P.시루스</h2>
<p>최고에 도달하려면 최저에서 시작하라.</p>
</div>
<div>
<h2>제임스 딘</h2>
<p>평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라.</p>
</div>
<div>
<h2>엘사 맥스웰</h2>
<p>먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에</p>
</div>
<div>
<h2>터키 속담</h2>
<p>계단을 밟아야 계단 위에 올라설수 있다.</p>
</div>
<div>
<h2>헨리 포드</h2>
<p>도중에 포기하지 말라. 망설이지 말라. 최후의 성공을 거둘 때까지 밀고 나가자.</p>
</div>
</div>
</div>
#tab-menu {
max-width: 600px;
background: rgb(173, 173, 173);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
overflow: hidden;
font-family: 'NEXONLv2Gothic';
color: #fff;
}
.tab-btn ul {
display: flex;
}
.tab-btn li {
width: 20%;
list-style: none;
text-align: center;
}
.tab-btn li a {
color: #fff;
text-decoration: none;
padding: 18px 15px 15px 15px;
display: block;
}
.tab-btn li.active a {
border-bottom: 3px solid #000;
color: #000;
}
.tab-cont {
background: #fff;
padding: 20px;
color: #222;
}
.tab-cont > div {
display: none;
}
.tab-cont > div:first-child {
display: block;
}
.tab-cont > div h2 {
margin-bottom: 10px;
}
.tab-cont > div p {
line-height: 1.6;
}
const tabBtn = document.querySelectorAll(".view-title ul li");
const tabCont = document.querySelectorAll(".view-cont > div");
tabBtn.forEach((element, index) => {
element.addEventListener("click", function () {
tabBtn.forEach(el => {
el.classList.remove("active");
});
element.classList.add("active");
tabCont.forEach(el => {
el.style.display = "none";
});
tabCont[index].style.display = "block";
});
})