25 lines
959 B
HTML
25 lines
959 B
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Hello...</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="parent-div">
|
||
|
|
<h1>Hello...</h1>
|
||
|
|
</div>
|
||
|
|
<div id="tabs" hx-target="#tab-contents" role="tablist" _="on htmx:afterOnLoad set @aria-selected of <[aria-selected=true]/> to false tell the target take .selected set @aria-selected to true">
|
||
|
|
<button role="tab" aria-controls="tab-content" aria-selected="true" hx-get="/tab1" class="selected">Tab 1</button>
|
||
|
|
<button role="tab" aria-controls="tab-content" aria-selected="false" hx-get="/tab2">Tab 2</button>
|
||
|
|
<button role="tab" aria-controls="tab-content" aria-selected="false" hx-get="/tab3">Tab 3</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-contents" role="tabpanel" hx-get="/tab1" hx-trigger="load"></div>
|
||
|
|
<button
|
||
|
|
hx-get="/world"
|
||
|
|
hx-trigger="click"
|
||
|
|
hx-target="#parent-div"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>Click Me!
|
||
|
|
</button>
|
||
|
|
<script src="/static/js/htmx.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|