JS 탭 메뉴 구현하기

JS 탭 메뉴 구현하기

 

HTML

    <div class="tab">
        <ul class="tab-list flex">
            <li class="tab-item all active" data-tab="tab-1">전체</li>
            <li class="tab-item unanswer" data-tab="tab-2">미답변</li>
            <li class="tab-item answered" data-tab="tab-3">답변완료</li>
            <li class="tab-item progress" data-tab="tab-4">진행확정</li>
        </ul>
    </div>
    <div class="sub-title bottom">
        <!-- 클릭 시 이동 -->
        <div class="empty">
            <p id="tab-1" class="empty all active">아직 받은 요청서가 없습니다.</p>
            <p id="tab-2" class="empty unanswer">미답변이 없습니다.</p>
            <p id="tab-3" class="empty answered">답변완료가 없습니다.</p>
            <p id="tab-4" class="empty progress">진행 확정이 없습니다.</p>
        </div>
    </div>

 

결과 화면

 

JavaScript

<script>
    $(document).ready(function(){

        $('ul.tab-list li').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tab-list li').removeClass('active');
            $('.empty').removeClass('active');

            $(this).addClass('active');
            $("#"+tab_id).addClass('active');
      })

    })
</script>

어쩌다 제이쿼리로,,

 

 

원래 하려고 했던 순서였지만, 못했던 과정

1. CSS에서 처음에는 모든 empty가 보이지 않도록 지정

2. 특정 class가 부여되면, 보이게 지정

3. 모든 요소를 불러줌

4. 요소마다 클릭이벤트를 지정

5. 클릭한 요소에 매칭되는 empty를 찾음

6. 매칭되는 empty에 클래스를 부여