Bootstrapで切り替えできるタブを実装する方法!

タブをクリックすることでメニューを切り替えることができるような機能を実装しようとすると、JavaScriptを使ったりして少々大変です。そこでBootstrapを使うことで簡単に切り替えができるタブを実装することができます。サンプルコードを使って解説してます。

コンテンツ [表示]

  1. 1Bootstrapで切り替えできるタブを実装したい
  2. 2Bootstrapで切り替えできるタブを実装する方法
  3. 2.1CSSを読み込む
  4. 2.2JavaScriptを読み込む
  5. 2.3タブを作る
  6. 2.4切り替える画像を配置する
  7. 2.5タブと連動して画像が切り替わるようにする
  8. 3Bootstrapのタブ関連の情報

Bootstrapで切り替えできるタブを実装したい

BootstrapはHTMLタグのclass属性に特定のクラスを指定するだけで、レスポンシブで洗礼されたデザインを簡単に実装することができるデザインフレームワークです。

今回Bootstrapを使って、タブを実装する方法を紹介します。タブをクリックすることで、メニューなどを切り替わるようにすることができます。

この機能を1から作るとなると少し大変ですが、Bootstrapで簡単に実装することができます。

Photo bykreatikar

Bootstrapで切り替えできるタブを実装する方法

それでは早速、切り替えできるタブを実装する方法をサンプルコードを使って解説していきます。

CSSを読み込む

CDN経由でBootstrapのCSSを読み込みます。

headタグの中に下記のコードを記述するだけで読み込めます。

CDNからBootstrapのCSSを読み込む

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

JavaScriptを読み込む

切り替えるタブを実装するためにはCSSだけでなく、JavaScriptも読み込む必要があります。

下記コードを記述することでCDN経由でBootstrapのJavaScriptを読み込むことができます。BootstrapのJavaScriptだけでなく、jQueryとPopper.jsも一緒に読み込むことを忘れないように注意しましょう。

CDNからBootstrapのJSを読み込む

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

タブを作る

まずは画像を切り替えるためのタブの部分だけを作成していきます。

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active">タブ1</a><!-- .nav-link -->
  </li><!-- .nav-item -->
  <li class="nav-item">
    <a class="nav-link">タブ2</a><!-- .nav-link -->
  </li><!-- .nav-item -->
  <li class="nav-item">
    <a class="nav-link">タブ3</a><!-- .nav-link -->
  </li><!-- .nav-item -->
</ul><!-- .nav nav-tabs -->

タブ要素を囲む親要素ulタグに対して、navクラスとnav-tabsクラスを指定します。

タブ要素となるliタグに対しては、nav-itemクラスを指定します。その子要素のaタグに対してnav-linkクラスを指定してリンクを設定します。これらの要素は必要なタブ数の分だけ用意します。

初期状態で選択された状態にしたいタブのnav-link要素に対してはactiveクラスを指定しておきます。

切り替える画像を配置する

次にタブで切り替えていく画像を配置していきます。

HTML

<div class="tab-content">
  <div class="tab-pane active">
    <img src="images/img1.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
  <div class="tab-pane">
    <img src="images/img2.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
  <div class="tab-pane">
    <img src="images/img3.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
</div><!-- .tab-content -->

切り替える画像要素の親要素に対して、tab-contentクラスを指定します。

切り替える画像要素に対してはtab-paneクラスを指定します。その子要素にimgタグを配置してsrc属性に表示させたい画像のパスを指定します。タブを用意した数だけこれらの要素を用意します。

タブ同様に最初に表示させた状態にしたいtab-pane要素に対してactiveクラスを指定しておきます。

タブと連動して画像が切り替わるようにする

最後にタブをクリックすることで画像が切り替わるように実装していきます。

HTML

<div class="tab-content">
  <div id="img1" class="tab-pane active">
    <img src="images/img1.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
  <div id="img2" class="tab-pane">
    <img src="images/img2.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
  <div id="img3" class="tab-pane">
    <img src="images/img3.jpg" class="img-fluid">
  </div><!-- .tab-pane -->
</div><!-- .tab-content -->

まず、tab-pane要素に対して一意のid属性を指定しておきます。

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#img1" class="nav-link active" data-toggle="tab">タブ1</a><!-- .nav-link -->
  </li><!-- .nav-item -->
  <li class="nav-item">
    <a href="#img2" class="nav-link" data-toggle="tab">タブ2</a><!-- .nav-link -->
  </li><!-- .nav-item -->
  <li class="nav-item">
    <a href="#img3" class="nav-link" data-toggle="tab">タブ3</a><!-- .nav-link -->
  </li><!-- .nav-item -->
</ul><!-- .nav nav-tabs -->

タブをクリックすることで画像を切り替えるようにするためにはnav-link要素に対してdata-toggle="tab"を指定します。

また、nav-link要素でhref属性に先ほど画像側で設定したid属性にそれぞれ対応した値を指定します。こうすることでクリックしたタブのhref属性に対応するid属性を指定した画像要素が表示されるように切り替えることができるようになります。

Bootstrapのタブ関連の情報

今回、Bootstrapで切り替えできるタブを実装する方法を紹介してきました。

最後にBootstrapのタブに関連する記事を紹介します。ぜひ参考にしてみてくださいね。

あわせて読みたい
Bootstrapでタブ切り替えが出来ない場合の原因と対処法!のイメージ
Bootstrapでタブ切り替えが出来ない場合の原因と対処法!
Bootstrapではタグに特定のクラスを指定してあげるだけで簡単にタブ切り替えが実装できるようになります。しかし、タブ切り替えが上手く動作しないことがあります。この記事ではBootstrapでタブ切り替えが出来ない場合の原因と対象法を紹介しています。
あわせて読みたい
Bootstrapでタブの色を変更する方法をサンプルコード付き解説!のイメージ
Bootstrapでタブの色を変更する方法をサンプルコード付き解説!
Bootstrapでは簡単にタブ切り替えが実装できます。しかしタブの色はデフォルトではBootstrapで青色と決められています。この記事ではBootstrapでタブの色を変更する方法をサンプルコード付きで解説しています。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事