jQuery Mobile 탭 — data-role="tabs" 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 탭
data-role="tabs" + navbar 완전 정리

한 페이지 안에서 컨텐츠를 탭으로 전환

시작 오늘 분석할 코드

지금까지 본 navbar는 다른 page로 이동하는 용도였다. 이번엔 data-role="tabs"를 사용해서 같은 page 안에서 컨텐츠 영역만 바꾸는 탭을 만든다.

<div data-role="tabs"> <div data-role="navbar"> <ul> <li><a href="#tab1">탭1</a></li> <li><a href="#tab2">탭2</a></li> <li><a href="#tab3">탭3</a></li> </ul> </div> <div id="tab1" style="background-color:green"><h1>첫번째 탭 내용</h1></div> <div id="tab2" style="background-color:yellow"><h1>두번째 탭 내용</h1></div> <div id="tab3" style="background-color:pink"><h1>세번째 탭 내용</h1></div> </div>

탭1탭2탭3

첫번째 탭 내용

탭1탭2탭3

두번째 탭 내용

탭1탭2탭3

세번째 탭 내용

---

용어 핵심 키워드

data-role="tabs"탭 컨테이너 — 안의 navbar와 panel div를 자동 연결

navbar in tabs탭 메뉴 — 클릭 시 해당 panel 표시

id="tabN"각 탭 내용 div의 식별자 — navbar a의 href와 매칭

한 페이지 내 전환page 이동 없이 같은 화면에서 영역만 교체

---

1 tabs vs navbar — 차이

둘 다 navbar를 사용하지만 적용하는 위치와 결과가 다르다.

• 일반 navbar + href="#page2" — 다른 page로 슬라이드 전환
• data-role="tabs" 안의 navbar + href="#tab2" — 같은 page 안의 다른 div(panel)로 즉시 전환

⚙ 차이의 핵심 — tabs 안의 href는 같은 컨테이너 안의 div id를 가리킨다. page id가 아니다.

---

2 자동 처리되는 것들

• navbar 클릭 → 해당 id의 div만 보이고 나머지는 숨김
• 현재 활성 탭이 자동으로 강조
• 탭 내용 사이에 자동 페이드/슬라이드 전환 (테마에 따라)
• 처음 로드 시 첫 번째 탭이 기본 활성화

---

3 인라인 style="background-color"

이 코드는 학습용으로 각 탭에 style="background-color: green" 같은 인라인 CSS를 줘서 탭이 바뀌는 게 시각적으로 잘 보이게 했다. 실제 서비스에서는 인라인 스타일 대신 외부 CSS로 분리하는 게 표준이다.

---

 

반응형

 

4 코드의 문법 오류

원본 코드 마지막에 </div 다음 >가 빠져있다 (footer 닫는 div 다음). 브라우저는 자동으로 수정해주지만 W3C 검증을 통과하지 못한다. 항상 닫는 태그는 정확히 </div>로.

---

5 자주 하는 실수

• tabs 컨테이너 없이 navbar만 두고 href="#tab1" 사용 → 페이지 이동으로 잘못 인식
• tab id 중복 → 어느 panel을 보일지 jQM이 혼란
• tab 내용 div가 tabs 컨테이너 밖에 있음 → 동작 안 함

---

6 현대식 대안

오늘날에는 Bootstrap Tabs, React Tabs, 단순 CSS+JS로 탭을 만든다. jQuery Mobile 1.4.5는 EOL이라 신규 프로젝트에는 적합하지 않다.

---

핵심 한 줄 요약

data-role="tabs"탭 컨테이너 — 안의 navbar+div 자동 연결

href="#tabN"같은 컨테이너 안 div id (page id 아님!)

한 페이지 내 전환page 이동 없이 영역만 교체

자동 처리선택 표시 / 다른 panel 숨김 / 전환 애니메이션

Tags

#jQuery-Mobile #tabs #data-role #page-tab #navbar #탭전환 #한페이지내전환 #영역교체 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, tabs, data-role, page-tab, navbar, 탭전환, 한페이지내전환, 영역교체, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리