HTML, Bootstrapを使ったタブの切り替え機能の実装

この記事はHTMLとBootstrapを使ってタブの切り替え機能を実装したので、実装方法を共有したいと思います。プログラミング学習者の実装なので、間違いなどありましたら教えて頂けると嬉しいです。

コードの全体像
おすすめとフォロー中の２つのタブを用意して、それぞれのタブを押した時にタブ以下の内容表示を切り替えるという機能です。
```ruby:index.html.slim
.tabs
  ul.nav.nav-tabs.nav-fill.sticky-top.blur-bg
    li.nav-item
      div class="#{'active' if params[:tab] == 'recommend'} text-center hover-bg py-3 px-2" type="button" data-bs-toggle="tab" data-bs-target="#for-you"
        = link_to 'おすすめ', home_index_path(tab: 'recommend'), class: 'link'
    li.nav-item
      div class="#{'active' if params[:tab] == 'follow'} text-center hover-bg py-3 px-2" type="button" data-bs-toggle="tab" data-bs-target="#following"
        = link_to 'フォロー中', home_index_path(tab: 'follow'), class: 'link'

  .tab-content
    div class="#{'show active' if params[:tab] == 'recommend'} tab-pane fade " id="for-you"
      - @tweets.each do |tweet|
        ul
          li #{tweet.user.name}
          li 投稿日： #{tweet.created_at.strftime('%Y/%m/%d %H:%M:%S')}
        p = tweet.comment
        - if tweet.images.attached?
          = image_tag tweet.images[0], size: '250x200'
      = paginate @tweets, :param_name => 'recmmend', params: {tab: 'recommend'}, theme: 'twitter-bootstrap-4'
      
    div class="#{'show active' if params[:tab] == 'follow'} tab-pane fade " id="following"
      - if current_user
        - @followers_tweets.each do |tweet|
          ul
            li #{tweet.user.name}
            li 投稿日： #{tweet.created_at.strftime('%Y/%m/%d %H:%M:%S')}
          p = tweet.comment
          - if tweet.images.attached?
            = image_tag tweet.images[0], size: '250x200'
        = paginate @followers_tweets, :param_name => 'follow', params: {tab: 'follow'}, theme: 'twitter-bootstrap-4'
      - else
        p ログインしていません
```
詳細説明
---------------------------------------------------------------------------------

# link_to のリンクを踏んだ時にparamsとしてタブの値を渡すように実装
```ruby:index.html.slim
= link_to 'おすすめ', home_index_path(tab: 'recommend'), class: 'link'
```
リンク先である`home_index_path`の後に`tab: 'recommend'`とすることでparamsの値に`tab`を新たに含めることができる。

# paramsの値に指定の値が入った時だけ内容を表示させるようにする
```ruby:index.html.slim
 li.nav-item
        div class="#{'active' if params[:tab] == 'recommend'} text-center hover-bg py-3 px-2" type="button" data-bs-toggle="tab" data-bs-target="#for-you"
```
`tab`に`recommend`という値が入れば、タブをアクティブに切り替えて表示する(class='active'にする)。


```ruby:index.html.slim
div class="#{'show active' if params[:tab] == 'recommend'} tab-pane fade " id="for-you"
    - @tweets.each do |tweet|
        ul
            li #{tweet.user.name}
            li 投稿日： #{tweet.created_at.strftime('%Y/%m/%d %H:%M:%S')}
        p = tweet.comment
        - if tweet.images.attached?
            = image_tag tweet.images[0], size: '250x200'
        = paginate @tweets, :param_name => 'recommend', params: {tab: 'recommend'}, theme: 'twitter-bootstrap-4'
```
`tab`に`recommend`の値が入ると、詳細を表示する。
1行目の`class`に入っている`fade`は内容を非表示にするものです。
通常は`fade`で非表示にしておいて、`params[:tab]`に`recommend`が入ると`class`を`fade`から`active`に切り替えるので、each文以下の内容を表示してくる実装となります。
`:param_name` => `'recommend'`の所は、`kaminari`というページネーションgemの為の記述です。
今回の実装では１つのページにタブで分割して２つの内容を表示させるので、ページの内容を区別させる為に`recommend`という名前をページにつけています。
また、`params: {tab: 'recommend'}`と記載することでページネーションのボタンをクリックして読み込んだ際も`tab`を`recommend`と認識させることができます。
今回の実装内容ではおすすめとフォロー中のタブがありますが、`params: {tab: 'recommend'}`の記載がない場合はどっちのタブのページネーションリンクを押してもメインタブのrecommendに移動しまうという不具合が発生します。