탭메뉴

WAI-ARIA Tabs · ←→ 키로 이동 · 선택 탭만 Tab 키 순서에 포함

서비스를 이용하기 전 필수 안내 사항입니다. 탭 키로 탭 목록에 진입한 뒤, 방향키로 다른 탭을 선택할 수 있습니다.

탭은 button + role="tab", 패널은 role="tabpanel"로 연결합니다.

* 숨긴 패널은 hidden + aria-hidden="true" (display:none만 쓰지 않음).

* 마우스 hover만으로 전환하는 방식은 키보드·터치 환경에 불리하므로 권장하지 않습니다.

하단 보더형 · 동일 스크립트

공지 탭 패널 내용입니다.

탭이 많을 때 반응형 권장 — 한 줄 + 가로 스크롤 · 선택 탭은 자동으로 보이도록 스크롤

탭이 많을 때는 줄바꿈보다 가로 스크롤을 권장합니다. 좁은 화면에서 탭을 좌우로 밀어 이동할 수 있습니다.

* 클래스: .tab-box.tab-scroll — PC·모바일 모두 한 줄 + 가로 스크롤.

* 기본 탭(.tab-box)도 640px 이하에서는 동일하게 가로 스크롤됩니다.

* select로 탭을 대체하는 방식은 ARIA Tabs 패턴이 달라지므로 이 킷에서는 권장하지 않습니다.

$('#demoTabs').sectionDisplay({
  act: 'click',
  start: 0,
  nav: $('#demoTabs .tab-list'),
  auto: false
});