頁籤 (使用 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>

伺服器請求 ↑ 顯示

頁籤 (使用 JavaScript)

#範例程式碼

🔗演示