This example shows how to load tab contents using htmx, and to select the "active" tab using Javascript. This reduces some duplication by offloading some of the work of re-rendering the tab HTML from your application server to your clients' browsers.
You may also consider a more idiomatic approach that follows the principle of Hypertext As The Engine Of Application State ..
The HTML below displays a list of tabs, with added HTMX to dynamically load each tab pane from the server. A simple
hyperscript
event handler uses the
take
command
to switch the selected tab when the content is swapped into the DOM. Alternatively, this could be accomplished with a slightly longer Javascript event handler.
<div id="tabs" hx-target="#tab-contents" _="on htmx:afterOnLoad take .selected for event.target">
<a hx-get="/tab1" class="selected">Tab 1</a>
<a hx-get="/tab2">Tab 2</a>
<a hx-get="/tab3">Tab 3</a>
</div>
<div id="tab-contents" hx-get="/tab1" hx-trigger="load"></div>
<p>Aute chia marfa echo park tote bag hammock mollit artisan listicle direct trade.
Raw denim flexitarian eu godard etsy.
Poke tbh la croix put a bird on it fixie polaroid aute cred air plant four loko gastropub swag non brunch.
Iceland fanny pack tumeric magna activated charcoal bitters palo santo laboris quis consectetur cupidatat portland aliquip venmo.</p>
Aute chia marfa echo park tote bag hammock mollit artisan listicle direct trade. Raw denim flexitarian eu godard etsy. Poke tbh la croix put a bird on it fixie polaroid aute cred air plant four loko gastropub swag non brunch. Iceland fanny pack tumeric magna activated charcoal bitters palo santo laboris quis consectetur cupidatat portland aliquip venmo.