[제이쿼리] 갤러리 탭 메뉴, 필터 기능 구현

제이쿼리를 이용하여 탭메뉴를 구현해보자.

탭메뉴는 유용하게 쓰는 UI 중 하나인데, 카테고리를 클릭하면 해당 카테고리에 속한 사진 등 내용을 확인 할 수 있는

일종의 필터 형식으로 구현해봤다.

 

먼저 모든 카테고리인 all에 active 해주고, 클릭 시 마다 컨텐츠와 버튼에 active를 넣고 빼주면 된다.

<script>         $(document).ready(function() {             var tab_btn = $('.tab_btn > ul > li');             var tab_cont = $('.tab_content > ul');             tab_cont.hide().eq(0).show(); // 첫번째 컨텐츠 영역 보이기             tab_btn.click(function(e) {                 e.preventDefault();                 var target = $(this); // 클릭한 요소를 target에 저장                 var index = target.index(); // 클릭한 요소에 index 를 지정                 tab_btn.removeClass('active'); // 버튼에 active 제거                 target.addClass('active'); // 클릭한 요소에 active 추가                 tab_cont.hide(); // 컨텐츠 영역 숨기기                 tab_cont.eq(index).show(); // index가 추가된 컨텐츠 영역 보이기             });         });     </script>