Bootstrapで切り替えできるタブを実装する方法！
タブをクリックすることでメニューを切り替えることができるような機能を実装しようとすると、JavaScriptを使ったりして少々大変です。そこでBootstrapを使うことで簡単に切り替えができるタブを実装することができます。サンプルコードを使って解説してます。
Bootstrapで切り替えできるタブを実装したい
BootstrapはHTMLタグのclass属性に特定のクラスを指定するだけで、レスポンシブで洗礼されたデザインを簡単に実装することができるデザインフレームワークです。
今回Bootstrapを使って、タブを実装する方法を紹介します。タブをクリックすることで、メニューなどを切り替わるようにすることができます。
この機能を１から作るとなると少し大変ですが、Bootstrapで簡単に実装することができます。
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">タブ１</a><!-- .nav-link -->
</li><!-- .nav-item -->
<li class="nav-item">
<a class="nav-link">タブ２</a><!-- .nav-link -->
</li><!-- .nav-item -->
<li class="nav-item">
<a class="nav-link">タブ３</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">タブ１</a><!-- .nav-link -->
</li><!-- .nav-item -->
<li class="nav-item">
<a href="#img2" class="nav-link" data-toggle="tab">タブ２</a><!-- .nav-link -->
</li><!-- .nav-item -->
<li class="nav-item">
<a href="#img3" class="nav-link" data-toggle="tab">タブ３</a><!-- .nav-link -->
</li><!-- .nav-item -->
</ul><!-- .nav nav-tabs -->タブをクリックすることで画像を切り替えるようにするためにはnav-link要素に対してdata-toggle="tab"を指定します。
また、nav-link要素でhref属性に先ほど画像側で設定したid属性にそれぞれ対応した値を指定します。こうすることでクリックしたタブのhref属性に対応するid属性を指定した画像要素が表示されるように切り替えることができるようになります。
Bootstrapのタブ関連の情報
今回、Bootstrapで切り替えできるタブを実装する方法を紹介してきました。
最後にBootstrapのタブに関連する記事を紹介します。ぜひ参考にしてみてくださいね。
【期間限定】全カリキュラム無料で提供中！
Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！
