htmxでタブ切り替え

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

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

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

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

https://htmx.org/api/

### タブ切り替え実装！



```html
<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
```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
}
```

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRKZQbm" data-user="niyu1103" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/niyu1103/pen/GRKZQbm">
  Untitled</a> by takako okunishi (<a href="https://codepen.io/niyu1103">@niyu1103</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### 参考サイト：

https://putyourlightson.com/articles/htmx-has-a-javascript-api-btw