选项卡（使用 HATEOAS）

此示例显示了使用 htmx 实现选项卡是多么容易。遵循超文本作为应用程序状态引擎的原则，所选选项卡是应用程序状态的一部分。因此，要在应用程序中显示和选择选项卡，只需在返回的 HTML 中包含选项卡标记即可。如果这不适合您的应用服务器设计，您也可以使用一点JavaScript 来选择选项卡。

示例代码（主页面）

主页仅包含以下 HTML 以将初始选项卡加载到 DOM 中。

<div id="tabs" hx-get="/tab1" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>

示例代码（每个标签）

后续选项卡页将显示所有选项卡并相应地突出显示所选选项卡。

<div class="tab-list" role="tablist">
    <button hx-get="/tab1" class="selected" role="tab" aria-selected="true" aria-controls="tab-content">Tab 1</button>
    <button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">Tab 2</button>
    <button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button>
</div>

<div id="tab-content" role="tabpanel" class="tab-content">
    Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over.
    Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore.
    Polaroid duis occaecat narwhal small batch food truck.
    PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade.
    Enim tousled cliche woke, typewriter single-origin coffee hella culpa.
    Art party readymade 90's, asymmetrical hell of fingerstache ipsum.
</div>

Server Requests ↑ Show

演示

Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over. Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore. Polaroid duis occaecat narwhal small batch food truck. PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade. Enim tousled cliche woke, typewriter single-origin coffee hella culpa. Art party readymade 90's, asymmetrical hell of fingerstache ipsum.