Tabs Using Javascript

from fasthtml.common import Div, Label, Style, fast_app

css = """
.selected {
  color: rgb(16, 149, 193);
  cursor: pointer;
}
"""
app, rt = fast_app(hdrs=[Style(css)])

js = """
let currentTab = document.querySelector('.selected');
currentTab.classList.remove('selected')
let newTab = event.target
newTab.classList.add('selected')
"""


@app.get
def page():
    return (
        Div(hx_target="#tab_content", **{"hx-on:htmx-after-on-load": js}, style="display:flex;gap:15px")(
            Label("Tab 1", hx_get=tab1, cls="selected"),
            Label("Tab 2", hx_get=tab2, cls=""),
            Label("Tab 3", hx_get=tab3, cls=""),
        ),
        Div(hx_get=tab1, hx_trigger="load", id="tab_content"),
    )


@app.get
def tab1():
    return Div("This is the content of tab 1")


@app.get
def tab2():
    return Div("This is the content of tab 2")


@app.get
def tab3():
    return Div("This is the content of tab 3")

Server Calls