開発環境

Rails 6.1.4
ruby 2.6.3

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  
    <div class="wrap">
      <ul id="tab-menu">
        <li><a href="#tab1" class="active">TAB1</a></li>
        <li><a href="#tab2" class="">TAB2</a></li>
        <li><a href="#tab3" class="">TAB3</a></li>
        <li><a href="#tab4" class="">TAB4</a></li>
      </ul>

      <div id="tab-contents">
        <div id="tab1" class="tab">
          <p>テキストが入ります。</p>
        </div>

        <div id="tab2" class="tab">
          <p>テキストが入ります。テキストが入ります。</p>
        </div>

        <div id="tab3" class="tab">
          <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>

        <div id="tab4" class="tab">
          <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

次に、CSSファイルを作成します。

style.css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  margin: 50px 0;
}

.wrap {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

#tab-menu {
  display: flex;
}

#tab-menu li {
  list-style-type: none;
  width: 25%;
}

#tab-menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 20px;
  text-align: center;
  background: #000;
  border: 1px solid #000;
  border-bottom: none;
}

#tab-menu .active {
  background: #fff;
  color: #000;
}

#tab-contents {
  display: flex;
  flex-wrap: wrap;
}

#tab-contents .tab {
  width: 100%;
  padding: 30px;
  background: #fff;
  border: 1px solid #000;
  border-top: none;
}

#tab-contents p {
  color: #000;
  line-height: 2.5;
}

ここまで作成するとほぼタブはできているのですが、
HTMLとCSSだけでは4つのタブごとに表示したいコンテンツが
すべてTAB1に縦に並んで表示されてしまいます。

ここでjQueryを使って、クリックされたタブのコンテンツだけが
表示されるように設定していきましょう。

jQueryの設定

jsフォルダを作成し、その中にscript.jsを作成します。
script.jsファイルに、以下のように記述します。

js/script.js

$('#tab-contents .tab[id != "tab1"]').hide();

$('#tab-menu a').on('click', function(event) {
  $("#tab-contents .tab").hide();
  $("#tab-menu .active").removeClass("active");
  $(this).addClass("active");
  $($(this).attr("href")).show();
  event.preventDefault();
});

これで完成です！お疲れ様でした！
あくまで備忘録なので足りない説明等多々あるかと思います。
行き詰まった際の助けになれば幸いです。

【JavaScript】タブメニューの作成

開発環境

目次

目標

HTMLとCSSファイルの作成

jQueryの設定