[그누보드5 X] 탭메뉴 전체 채택완료

<div class="tab">

    <ul>

        <li data-id="all" class="on">전체</li> <!-- 전체 -->

        <li data-id="con1">tab1</li>

        <li data-id="con2">tab2</li>

        <li data-id="con3">tab3</li>

    </ul>

    <div id="all" class="conBox on">

        <!-- 전체 리스트가 다 나오게 -->

    </div>

    <div id="con1" class="conBox">

        cont1

    </div>

    <div id="con2" class="conBox">

        cont2

    </div>

    <div id="con3" class="conBox">

        cont3

    </div>

</div>

<script>

    $(function(){

        // tab 메뉴를 클릭하였을 때 동작함

        $(".tab ul li").click(function(){ 

             

            // 현재 선택되어있던 메뉴들을 초기화함

            $(".tab ul li").removeClass('on');

            $(".tab .conBox").removeClass('on');

 

            // 선택된 메뉴에 on 클래스를 주어 표기함

            $(this).addClass('on');

 

            // 선택된 탭의 data 값으로 content box를 선택함

            $("#"+$(this).data('id')).addClass('on');

        });

    });

</script>