메뉴 이펙트 - 탭 메뉴
<main>
<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>Documentation</h2>
<p>Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins,
functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets
well-organized and makes it easy to share design within and across projects.</p>
</div>
<div>
<h2>Syntax</h2>
<p>Sass supports two different syntaxes. Each one can load the other, so it's up to you and your team which
one to choose</p>
</div>
<div>
<h2>Parsing a Stylesheet</h2>
<p>Just like CSS, most Sass stylesheets are mainly made up of style rules that contain property declarations.
But Sass stylesheets have many more features that can exist alongside these.</p>
</div>
<div>
<h2>Structure of a Stylesheet</h2>
<p>Just like CSS, most Sass stylesheets are mainly made up of style rules that contain property declarations.
But Sass stylesheets have many more features that can exist alongside these.</p>
</div>
<div>
<h2>Comments</h2>
<p>The way Sass comments work differs substantially between SCSS and the indented syntax. Both syntaxes
support two types of comments: comments defined using /* */ that are (usually) compiled to CSS, and comments
defined using // that are not.</p>
</div>
</div>
</div>
</main>
#tab-menu {
max-width: 600px;
background: #464646;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: "NEXONLv2Gothic";
color: #fff;
border-radius: 5px;
overflow: hidden;
}
.tab-btn ul {
display: flex;
}
.tab-btn li {
width: 20%;
list-style: none;
text-align: center;
display: inline-block;
}
.tab-btn li a {
color: #fff;
text-decoration: none;
display: block;
padding: 18px 15px 15px 15px;
}
.tab-btn li.active a {
border-bottom: 3px solid #ffa995;
}
.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: 18px;
}
.tab-cont>div p {
line-height: 1.6;
}
const viewBtn = $(".view-title ul li");
const viewCont = $(".view-cont > div");
viewBtn.click(function(){
viewBtn.removeClass("active");
$(this).addClass("active");
let index = $(this).index();
viewCont.css("display","none");
viewCont.eq(index).css("display","block");
});