标签（使用 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>

🔗演示