728x90
간단한 탭 메뉴입니다.
1 첫 번째 메뉴 내용입니다.
2 두 번째 메뉴 내용입니다.
3 세 번째 메뉴 내용입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2. CSS
.tab_box { width: 600px; margin: 0 auto; }
.tab_menu { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.tab_menu li { float: left; margin: 0 1px 0 0; padding: 10px 15px; background: #eee; color: #555; cursor: pointer; }
.tab_menu li.on { background: #000; color: #fff; }
.tab_cont { display: none; padding: 20px; border: 1px solid #000; color: #555; }
.tab_cont.on { display: inherit; }
3. HTML
<div class="tab_box">
<ul class="tab_menu">
<li class="on">menu 1</li>
<li class="">menu 2</li>
<li class="">menu 3</li>
</ul>
<div class="tab_cont on">1 첫 번째 메뉴 내용입니다.</div>
<div class="tab_cont">2 두 번째 메뉴 내용입니다.</div>
<div class="tab_cont">3 세 번째 메뉴 내용입니다.</div>
</div>
4. Script
<script type="text/javascript">
$(document).ready(function(){
$(".tab_menu > li").each(function(n) {
$(this).on("click", function() {
$(".tab_menu li").removeClass("on").eq(n).addClass("on");
$(".tab_cont").removeClass("on").eq(n).addClass("on");
});
});
})
</script>
728x90