选项卡（使用 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>

🔗演示