More than 1 year has passed since last update.

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

Last updated at 2022-07-15Posted at 2022-07-15

開発環境

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();
});

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

開発環境

目次

目標

HTMLとCSSファイルの作成

jQueryの設定