标签（使用 HATEOAS）

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

¥This example shows how easy it is to implement tabs using htmx. Following the principle of Hypertext As The Engine Of Application State, the selected tab is a part of the application state. Therefore, to display and select tabs in your application, simply include the tab markup in the returned HTML. If this does not suit your application server design, you can also use a little bit of JavaScript to select tabs instead.

示例代码（主页）

¥Example Code (Main Page)

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

¥The main page simply includes the following HTML to load the initial tab into the DOM.

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

示例代码（每个选项卡）

¥Example Code (Each Tab)

后续选项卡页面显示所有选项卡并相应地高亮所选选项卡。

¥Subsequent tab pages display all tabs and highlight the selected one accordingly.

<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>

🔗Demo