选项卡（使用 JavaScript）

这个示例展示了如何使用 htmx 加载选项卡内容，并使用 JavaScript 选择“活动”选项卡。这通过将重新渲染选项卡 HTML 的一些工作从您的应用服务器转移到客户端浏览器来减少一些重复。

您也可以考虑一种更惯用的方法（a more idiomatic approach），它遵循 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