Question: Idiomatic way to "select" a tab in parent document

How do I implement “tabs” with htmx so that labels are highlighted when the content is loaded?

I’m building an htmx starter project for some middle-schoolers. Here is a part of the main page (index.html)

<div class="tabs">
	<a hx-get="tab-a.html" hx-target="#tab-content">Tab A</a>
	<a hx-get="tab-b.html" hx-target="#tab-content">Tab B</a>
</div>
<div id="tab-content"></div>

This nicely loads content from the remote files tab-a.html and tab-b.html and swaps it into div#tab-content. However, I don’t know of a straightforward way to automatically “select” those tabs, for instance, by adding a “selected” class to each anchor. This seems like a basic feature that would be good to include, without requiring hyperscript or javascript hacks.

1. If this already exists, can you help me understand it and I’ll add something to the docs.

2. If this doesn’t exist, are there proposals on the table for handling this? Or, can I try proposing something simple and declarative to solve this?

[1cg]

The htmx way to do this is to include the tabs in the area replaced.

If you want to get a bit fancier and target only the content area, you can add some hyperscript or use takeClass from the javascript API: https://htmx.org/api/#takeClass

  <div onClick="htmx.takeClass(this, "activeOrWhatever")" ...>...</div>

[benpate]

I’m closing this because the PR has been merged.