タブ (JavaScript を使用)

この例は、htmx を使用してタブの内容をロードし、「アクティブな」タブを JavaScript を使用して選択する方法を示します。これにより、アプリケーションサーバーからクライアントブラウザーにタブ HTML の再レンダリングの一部をオフロードすることで重複を削減できます。

より慣用句的なアプローチ を検討することもできます。これは、アプリケーションステートのエンジンとしてのハイパーテキスト の原則に従います。

#例コード

次の 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>

🔗デモ