htmxでタブ切り替え

今流行りと聞いたhtmxでタブ切り替えしてみた

先日とある交流会でhtmxのことを教えてもらいました！
なんか、便利そう！！

非同期処理（get,post）ができることについての記事はたくさんありましたが、私は直感的に
Web制作でJqueryで実装している箇所を置き換えできるのでは？？
と思いました。

正直ドキュメントはあまり充実していませんでした。

タブ切り替え実装！

<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script> // これが重要！htmxを使用する際に必須な読み込みです。

<div class="tab_wrap">
  <button hx-on:click="htmx.takeClass('#tab-contents1', 'selected'), htmx.takeClass(this, 'selected')"  class="tab selected">Tab 1</button>
  <button hx-on:click="htmx.takeClass('#tab-contents2', 'selected'), htmx.takeClass(this, 'selected')" class="tab">Tab 2</button>
  <button hx-on:click="htmx.takeClass('#tab-contents3', 'selected'), htmx.takeClass(this, 'selected')" class="tab">Tab 3</button>
</div>
<div class="contents_wrap">
  <div id="tab-contents1" class="contents selected">タブ１の内容<br>テキストテキストテキストテキスト</div>
  <div id="tab-contents2" class="contents">タブ２の内容<br>テキストテキストテキストテキスト 
  <div id="tab-contents3" class="contents">タブ３の内容<br>テキストテキストテキストテキスト</div>
</div>

ポイントは

<button hx-on:click="htmx.takeClass('#tab-contents2', 'selected'), htmx.takeClass(this, 'selected')"  class="tab">Tab 1</button>

ボタンタグのclickイベントの記述です。
htmxのclickイベントの記述は以下です。

hx-on:click=

これでイベントを記述できます。

htmx.takeClass

今回はhtmx.takeClass()を使用しました。
こちらは同じ兄弟要素の一つにクラスを付与してくれ、該当要素以外（その他の兄弟要素）にクラスがついていたら勝手に削除してくれます。便利！！

他にもjqueryでもおなじみなtoggleとかaddClassとかもあります。

htmx.toggleClass()
htmx.removeClass()
htmx.addClass()

いろいろあるので、試してみて下さい！

htmx.takeClass('#tab-contents2', 'selected')

上記の意味としては、tab-contents2というidにselectedという名前のclassを付与する＆その他兄弟要素にselectedというクラスがついている要素があったら削除する。

というような意味になると思います。
ここでタブのテキスト（コンテンツ）の表示の切り替えをしています。

更に、

htmx.takeClass(this, 'selected')

ここでの、thisは自分自信（=buttonタグ）のことです。
クリックしたbuttonタグのクラスにもselectedというクラスを付与する＆その他兄弟要素（その他のbuttonタグ）からはselectedを削除する。
という意味です。

ここではタブのボタン自身のスタイルの変更をしています。

クリックイベントで複数処理をしたい場合、どうしたら良いのかドキュメント見てもなかったので、

hx-on:click="htmx.takeClass('#tab-contents2', 'selected'), htmx.takeClass(this, 'selected')"

とカンマで続けたら動いたので、これで良い？？
（もし正式があって間違っていたら教えて下さい〜）

これで複数処理でもきちんと実装できました！

やってみて

これ、物凄く軽量らしいので、重いJqeuryより断然良いのでは？
更にそんなに難しくないので、Web制作でコーディングしている人にもオススメ！！
と思って記事にしてみました。

是非コーディングに取り入れてみて下さい！

参考

css

.tab{
   border: 2px solid lightblue;
   border-bottom:none;
   cursor: pointer;
   outline: none;
   padding: 8px;
   appearance: none;
   font-weight:bold;  
   color:lightblue;
   background-color:white;
}
.tab.selected{
  background-color: lightblue;
  color:white;
}

.contents_wrap{
  padding:16px;
  border:2px solid lightblue;
}

.contents{
  display:none;
  
}

.contents.selected {
  display:block
}

実際操作感見てみて良い！と思ったら是非チャレンジしてみて下さい！

See the Pen Untitled by takako okunishi (@niyu1103) on CodePen.

参考サイト：