<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$(".tabbtn").on("click", function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".tablist").removeClass("active").eq(index).addClass("active");
});
});
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
Javascript 버전
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script>
window.onload = function () {
var btns = document.querySelectorAll(".tabbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].setAttribute("onclick", "btnClick(" + i + ");");
}
}
function btnClick(index) {
var tabbtn = document.getElementsByClassName("tabbtn");
var tablist = document.getElementsByClassName("tablist");
for (var i = 0; i < tabbtn.length; i++) {
if (index == i) {
tabbtn[i].className = "tabbtn active";
tablist[i].className = "tablist active";
} else {
tabbtn[i].className = "tabbtn";
tablist[i].className = "tablist";
}
}
}
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
