탭메뉴가 한페이지당 여러개가 사용되는 경우가 있다. 그때 클래스를 달리하여 하는 방법도 있지만, 유지보수나 운영측면에서 좋지않은 코드이기 때문에, rel값을 이용해 여러개를 사용하는 방법을 알아보겠다. See the Pen abpNGgW by aldo814 (@aldo814) on CodePen. 상단과 같이 탭메뉴가 되는 영역에 rel값을 주고, 해당 탭메뉴에 id값을 동일하게 해주면 간단하게 페이지내 여러 탭메뉴를 사용할 수 있다. 처음 만들었던 사이트를 포트폴리오에 사용하기 위해 다시 만들고 있는데 메인 페이지에서 사용하는 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를 사용할 때에도 한 페이지에 여러 개를 사용하느라 수업 내내 고민하다가 겨우 해결하곤 했었는데 탭 메뉴 고민도 이걸로 덜 수 있겠다. 이제 몇 개든 상관없어! 우선 jquery-ui 버전을 사용하였습니다. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#tabs" ).tabs(); } ); </script> </head> <body> <div id="tabs1"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>탭메뉴 1번 내용</p> </div> <div id="tabs-2"> <p>탭메뉴 2번 내용</p> </div> <div id="tabs-3"> <p>탭메뉴 3번 내용</p> </div> </div> </body> </html> 위처럼 jquery 와 jquery-ui 를 링크 하셔서 사용 하시면 됩니다. <script> $( function() { $( "#tabs1" ).tabs(); } );
</script> 위처럼 한개를 더 추가로 작성해 줍니다. 저 같은경우에는 처음부터 tabs1 , tabs2 로 나누었습니다. [1번 탭메뉴]
<ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>탭메뉴 1번 내용</p> </div> <div id="tabs-2"> <p>탭메뉴 2번 내용</p> </div> <div id="tabs-3"> <p>탭메뉴 3번 내용</p> </div> </div>
<div id="tabs2"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>탭메뉴 1번 내용</p> </div> <div id="tabs-2"> <p>탭메뉴 2번 내용</p> </div> <div id="tabs-3"> <p>탭메뉴 3번 내용</p> </div> </div>
|
JQuery 다중 탭 - jQuery dajung taeb
관련 게시물
저작권 © 2024 ko.apacode Inc.
