タブでの切り替えの実装 HTML CSS Javascript Bootstrap

タブの切り替え

今回は、タブ切り替え機能を作成します！！！

なんだかんだで苦戦しました。というのもjQuery UIというものを使用すれば、
”簡単”にタブの導入ができるみたいなのですが、うまく導入できなかったのか、
変な動きをしてしまったので諦めました・・・・。

ので、以下のyoutube動画を参考に実装しましたが、
私はBootstrapを使ってるため、以下の動画とコードは完全一致していませんので、
ご注意ください！！！

HTMLから書く！！！！

views/users/show.html.erb

#まず、タブの見出し（タイトル）を作成　ulタグで囲み、liで見出し書きます！！
  <ul class="nav nav-tabs" id="tabs">
      <li class="nav-item"><a class="nav-link active" href="">Introduction</a></li>
      <li class="nav-item"><a class="nav-link" href="">Status</i></a></li>
      <li class="nav-item"><a class="nav-link" href="">Activity</i></a></li>
  </ul>

#以下にそれぞれのタブの内容を書きます。全体はulタグで囲み、それぞれのタブの中身はdivタグで書く。
　<!--自己紹介のたぶの中身-->
  <ul id="tab-contents">
      <div class="tab_contents_item active" style="padding:10px;">
      　ここに１個目のタブに書きたい内容
　　　　　　　　　　　</div>

<!--ステータスたぶの中身-->
      <div class="tab_contents_item" style="padding:10px;">
       ここに２個目のタブに書きたい内容
      </div>

  <!--アクティビティたぶの中身-->
      <div class="tab_contents_item" style="padding:10px;">
　　　<!--グラフの記述-->
        省略します！！
    </div>
  </ul>

CSS！！！！

app/assets/stylesheets/users.scss

#activeがついてない時は、グレーになります。
.nav-link {
  background-color:#bbb;
}

#ホバーした時の記述
.nav-link:hover {
  opacity: 0.7;
  transition: 0.3s;
}

#「tab_contents_item」は通常時は何も表示されないようにします！！！
.tab_contents_item{
  display:none;
}

#activeがクラス名についたら表示されるようにします。
.tab_contents_item.active{
  display:block;
}

Bootstrapを使用してタブを実装してるのでCSSはかなりスッキリします。
さてJavascriptでやるのは、
タブがクリックされたらクリックされたタブと中身にactiveクラスを付与！
それ以外のタブ達からはactiveを削除！するということになります！！！

Javascript記述

app/assets/javascripts/application.js

#ターボリンクを無効にしないと、リロードしないと動かない現象が起こります。。。
document.addEventListener("turbolinks:load", function() {
#getElementsByClassNameで、クラスnav-linkを捕まえます。aタグのクラスですね。
const tabs = document.getElementsByClassName("nav-link");
#タブの中身も捕まえます。
const tab_contents = document.getElementsByClassName("tab_contents_item");
#不安だったら以下で、捕まえられてるか確認する。
// console.log(tabs);
// console.log(tab_contents);

#タブが何個あっても問題ないようにfor文で回していきます。
for (let i = 0; i < tabs.length; i++){
tabs[i].addEventListener("click",function(e){
  e.preventDefault();

  for (let j = 0; j < tabs.length; j++){
    tabs[j].classList.remove("active");
  }
  for (let j = 0; j < tabs.length; j++){
    tab_contents[j].classList.remove("active");
  }
  tabs[i].classList.add("active");
  tab_contents[i].classList.add("active");
});
}
})

for文の中身を詳しくみていきます。
仮にタブ[0]　→一個めのタブとします。
tabs[i].addEventListener("click",function(e){
タブ[0]がクリックされたら、、以下で全部のタブのactiveをハズします。
for (let j = 0; j < tabs.length; j++){
tabs[j].classList.remove("active");}
さらにタブの中身のactiveもハズします＝非表示になります。
for (let j = 0; j < tabs.length; j++){
tab_contents[j].classList.remove("active");
}
その上で、クリックされてるタブ[0]と中身にactiveを付与します＝表示される
tabs[i].classList.add("active");
tab_contents[i].classList.add("active");

一回全部activeをはずすので大丈夫！？かと不安になりますが、高速で処理されるので
全然わかりません！！！