Tabs (Using JavaScript)

이 예제에서는 htmx를 사용하여 탭 내용을 로드하고, 자바스크립트를 사용하여 “활성” 탭을 선택하는 방법을 보여줍니다. 이를 통해 탭 HTML을 다시 렌더링하는 작업의 일부를 애플리케이션 서버에서 클라이언트의 브라우저로 오프로드하여 중복을 줄일 수 있습니다.

Hypertext As The Engine Of Application State 원칙을 따르는 더 정통적인 접근 방식을 고려해 볼 수도 있습니다.

#예제 코드

아래 HTML은 탭 목록을 표시하며, htmx를 추가하여 서버에서 각 탭 패널을 동적으로 로드합니다. 간단한 JavaScript 이벤트 핸들러는 take 함수를 사용하여 콘텐츠가 DOM에 스왑될 때 선택된 탭을 전환합니다.

<div id="tabs" hx-target="#tab-contents" role="tablist"
     hx-on:htmx-after-on-load="let currentTab = document.querySelector('[aria-selected=true]');
                               currentTab.setAttribute('aria-selected', 'false')
                               currentTab.classList.remove('selected')
                               let newTab = event.target
                               newTab.setAttribute('aria-selected', 'true')
                               newTab.classList.add('selected')">
    <button role="tab" aria-controls="tab-contents" aria-selected="true" hx-get="/tab1" class="selected">Tab 1</button>
    <button role="tab" aria-controls="tab-contents" aria-selected="false" hx-get="/tab2">Tab 2</button>
    <button role="tab" aria-controls="tab-contents" aria-selected="false" hx-get="/tab3">Tab 3</button>
</div>

<div id="tab-contents" role="tabpanel" hx-get="/tab1" hx-trigger="load"></div>

🔗Demo