选项卡（使用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">选项卡1</button>
	<button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">选项卡2</button>
	<button hx-get"/tab3" role="tab" aria-selected="false" aria-controls="tab-content">选项卡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>

🔗演示