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

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

コードの全体像
おすすめとフォロー中の２つのタブを用意して、それぞれのタブを押した時にタブ以下の内容表示を切り替えるという機能です。

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としてタブの値を渡すように実装

index.html.slim

= link_to 'おすすめ', home_index_path(tab: 'recommend'), class: 'link'

リンク先であるhome_index_pathの後にtab: 'recommend'とすることでparamsの値にtabを新たに含めることができる。

paramsの値に指定の値が入った時だけ内容を表示させるようにする

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'にする)。

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に移動しまうという不具合が発生します。