选项卡（使用JavaScript）

此示例展示如何使用htmx加载选项卡内容，并使用JavaScript选择"活动"选项卡。这减少了服务器重新渲染选项卡HTML的工作量，将部分工作转移到客户端浏览器。

您也可以考虑更符合习惯的方法，它遵循超文本作为应用程序状态引擎的原则。

示例代码

下面的HTML显示了一个选项卡列表，添加了HTMX以从服务器动态加载每个选项卡面板。一个简单的JavaScript事件处理程序在内容交换到DOM时使用take函数来切换选中的选项卡。

<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">选项卡1</button>
    <button role="tab" aria-controls="tab-contents" aria-selected="false" hx-get="/tab2">选项卡2</button>
    <button role="tab" aria-controls"tab-contents" aria-selected="false" hx-get="/tab3">选项卡3</button>
</div>

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

🔗演示