[jQuery] 한 페이지에 탭메뉴 여러개 넣기

 

 

 

 

 

 

처음 만들었던 사이트를 포트폴리오에 사용하기 위해 다시 만들고 있는데

메인 페이지에서 사용하는 3개의 탭 메뉴를

CSS에서 jQuery로 바꾸면서 스스로의 숙제가 생겨났다.

 

CSS로 구현할 수 있는 것은 CSS로 구현하는 것이 좋다고 들었기에

모달로 띄우는 로그인, 회원가입의 경우 그대로 CSS를 이용했지만

탭 메뉴도 이전처럼 CSS로 쓰기에는 코드가 너무 장황해진다!

 

당시 이 사이트를 만들 땐 아직 jQuery를 배우기 전이라

인접 형제 선택자를 사용해서 display: none;, display: block;을 했지만

각각 메뉴가 5개, 8개, 8개인 탭 메뉴를 이제 와서 CSS로 하기엔

CSS가 너무 더럽...

 

그래서 검색하다가 처음 사용했던 제이쿼리 탭 메뉴 코드는 바로 이것!

 

38   한 메뉴를 클릭했을 때

39   전체 메뉴에 있는 active란 class를 제거하고

40   내가 선택한 메뉴에 active란 class를 부여한 후

41    전체 내용에서 내가 선택했던 메뉴와 같은 순번의 내용만 띄우고, 나머지 내용은 숨긴다.

 

 

처음엔 이 코드가 이해하기도 쉽고 적용하기에도 용이했지만

3개의 탭 메뉴를 사용하게 된다면 이와 같은걸 class만 바꾸어 세 번 작성해야 해서

CSS보다야 간단하지만, 간결하지 않기는 마찬가지였다.

 

 

그래서 다시 검색, 99%의 해답을 찾았다.

그럼 다시 처음부터-

예를 들면 내가 만들고자 하는 탭 메뉴는 이런 방식이다.

왼쪽의 <li>을 클릭하면 오른쪽에서 그때그때 이에 대응하는 <div>가 바뀌는 것.

탭 메뉴가 몇 개든, 모양이 어떻든 상관없이 '각각' 작용하게 하는 것이 포인트!

 

연습으로 간단한 HTML을 만든다.

<ul class="menu nav">, <li class="menu1">... 이 메뉴에 해당하고

<div class="menu tab">은 오른쪽에 보일 항목인데

div 또한 ul로 작성해도 무방하다.

 

CSS도 간단하게.

 

그리고 검색해서 찾은 이번 문제의 해답.

탭 메뉴를 플러그인으로 만들어 호출해서 쓰는 방식인데

여기서 16, 19번째 줄만 추가했다.

 

예제에서는 미리 active 해놓은 메뉴가 없어서 16번째 줄이 없어도 상관없었는데,

나는 처음에 내가 선택한 메뉴가 없다고 해서 내용이 비어있는 게 아니라

처음부터 내용 하나는 반드시 띄워져 있어야 했기 때문에

이렇게 처음부터 메뉴와 내용의 첫 항목에 각각 active를 걸어두었다.

 

그래서 그냥 예제의 코드대로만 사용하면 내가 menu3을 클릭하면 menu3이 active 되면서도

처음 작성해 둔 menu1의 active가 없어지지 않아 두 개의 메뉴가 활성화된 것처럼 보인다.

그래서 일단 16번째 줄 추가.

 

그리고 19번째 줄의 경우 메뉴에 해당하는 오른쪽 내용(<div>)이 각각 바뀌지 않아서 추가한 건데

이건 맨 처음 사용했던 제이쿼리 코드에서 가져와 약간만 수정해서 사용했다.

 

말로 풀자면-

내가 선택한 메뉴(<li>)의 부모 요소인 'ul'의 다음 요소(<div>)의 자식 요소들(div.menu1, div.menu2...) 중에서

내가 선택한 메뉴($(this))와 같은 순번의 내용을 보이게 하고, 전체 형제 요소는 숨긴다.

 

그리고 이렇게 HTML에 불러오고 호출해서 완성.

 

두 탭 메뉴의 클래스가 같아도 꼬이는 일 없이

각각의 메뉴가 잘 적용된다!

 

이 방식대로라면 한 페이지에 탭 메뉴가 열개든 백개든 상관없이 사용할 수 있다.

 

예전에 swiper를 사용할 때에도 한 페이지에 여러 개를 사용하느라

수업 내내 고민하다가 겨우 해결하곤 했었는데

탭 메뉴 고민도 이걸로 덜 수 있겠다.

이제 몇 개든 상관없어!