[JQuery] Tab 메뉴(기능편) > 학습

<style>
    .tab_btn ul li{display: inline-block; padding: 0 10px;}
    .tab_contents{margin-top: 20px; padding: 0 10px;}
    .tab_contents > div{display: none;}
    .tab_contents > div:first-child{display: block;}
</style>

<div class="tab_btn">
    <ul>
        <li>Tab-1</li>
        <li>Tab-2</li>
        <li>Tab-3</li>
    </ul>
</div>
<div class="tab_contents">
    <div>Tab-content-1</div>
    <div>Tab-content-2</div>
    <div>Tab-content-3</div>
</div>

<script>
$(document).ready(function(){
    var tabBtn = $(".tab_btn > ul > li"), //탭 버튼
        tabCont = $(".tab_contents > div"), //탭 내용
        tabBtn_num; //클릭이벤트 발생시 index를 넣을 변수

    tabBtn.click(function(){
        tabBtn_num = $(this).index(); //클릭한 탭버튼의 번째수(index)를 가져옴
        tabCont.eq(tabBtn_num).show().siblings().hide(); //클릭한 탭버튼의 번째수와 동일한 내용 보여주고 다른 내용들은 숨김
    });
});
</script>