2020/08/07 2022/06/19

【jQuery】タブ切り替えの機能をサクッと実装する方法【コピペで超簡単】

JavaScript

ボタンやタブで切り替えて、Webサイトのコンテンツを変更する方法を知りたい。JavaScriptはあまりわからないし、簡単にサクッと作れる方法が知りたい。

こういった方でも出来る「コピペOK」なコードをお見せします。

サクッと出来ますので、お困りの方はぜひどうぞ！

タブで切り替える機能をjQueryでサクッと実装する

タブで切り替える機能をjQueryでサクッと実装する
必要な言語は下記の通り。

HTML
CSS
jQuery

順番に解説します。

HTMLでやること

HTMLでやることは、表示用のコンテンツを作ることです。下記をコピペしたらOKです。

HTMLのコード

<!-- 切り替えボタン -->
    <div class="buttonBox">
      <a class="button tab-active" id="tab1_button">
        タブ１
      </a>
      <a class="button" id="tab2_button">
        タブ２
      </a>
    </div>

    <!-- ケース別の表示・非表示 -->
    <!-- tab1の場合 -->
    <div class="contents" id="tab1">
      <h3 class="tab-h3">
        タブ１の見出し
      </h3>
      <div class="tab-content">
        タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容・タブ１の内容
      </div>
    </div>

    <!-- tab2の場合 -->
    <div class="contents" id="tab2">
      <h3 class="tab-h3">
        タブ２の見出し
      </h3>
      <div class="tab-content">
        タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容・タブ２の内容
      </div>
    </div>

これでOKです。

なお、jQueryを読み込む必要があるので、bodyタグを閉じる直前とかで、読み込むようにしておいてください。

よくわからないって方は、</body>の前で、下記をコピペしておいたら大丈夫です！後でちゃんと調べておきましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSSでやること

CSSでやることは、切り替えの飾り付けです。とはいっても、最小限で書いているので、残りは自分の好きなようにカスタマイズしてOKです。

CSSのコード

.buttonBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  color: #333;
  border: 1px solid #333;
  width: calc(70% / 2);
  text-align: center;
  padding: 10px;
  margin-right: 26px;
}
.button:last-child {
  margin-right: 0;
}
.button:hover {
  background-color: #444;
  color: #fff;
  cursor: pointer;
}
.buttonBox .tab-active {
  background-color: #333;
  color: #fff;
}
.contents {
  width: 70%;
  margin: 0 auto;
}
.tab-content {
  text-align: left;
}
[id="tab2"] {
  display: none;
}

CSSはこんな感じ。

タブというよりは、ボタン風ですかね。こだわりがあれば、お好みで書き換えてみてください。

jQueryでやること

jQueryでやることは下記の通り

①：ボタンをチェック
②：状態をチェック
③：表示・非表示の処理

こんな感じです。これも下記のコードをコピペしたら実装できます。

jQueryのコード

// *******************************************
// ボタンやタブ切り替えによる表示・非表示の処理
// *******************************************
// ①ボタンを監視
$("#tab1_button").on("click", function () {
  // ②状態をチェック
  // tab1ボタンがアクティブかどうか
  if ($("#tab1_button").hasClass("tab-active")) {
    // アクティブなら何もしない
  } else {
    // ③表示・非表示の処理
    // アクティブではない
    // tab2を非表示
    $("#tab2").hide();
    $("#tab2_button").removeClass("tab-active");
    // tab1を表示
    $("#tab1").fadeIn();
    $("#tab1_button").addClass("tab-active");
  }
});
// ①ボタンを監視
$("#tab2_button").on("click", function () {
  // ②状態をチェック
  // tab2がアクティブかどうか
  if ($("#tab2_button").hasClass("tab-active")) {
    // アクティブなら何もしない
  } else {
    // ③表示・非表示の処理
    // アクティブではない
    // tab1を非表示
    $("#tab1").hide();
    $("#tab1_button").removeClass("tab-active");
    // tab2を表示
    $("#tab2").fadeIn();
    $("#tab2_button").addClass("tab-active");
  }
});

これで全て完了です！
そのまま使用すると、下記のようになるはずです。