タブメニュー Tabの使い方 BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。
 

ここでは、Bootstrap3.3.7に搭載されている「タブ」の使い方をご紹介します。
 

カテゴリ別にタブで分けてコンテンツを見せる場合に使えそうですね

タブ tabとは

タブメニューとコンテンツを連動することで、ページを変遷することなく表示コンテンツを切り替えるJavaScriptです。例のように、コンテンツをタブで分けて見せる場合に利用できます。
 

■表示例

タブの作り方

表示例のソースコードは下記の通りです。大きく「タブメニュー」と「タブの内容」から構成されます。

<!-- タブ・メニュー -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#content1" data-toggle="tab">最新ニュース</a></li>
	<li><a href="#content2" data-toggle="tab">セミナー情報</a></li>
	<li><a href="#content3" data-toggle="tab">メディア掲載歴</a></li>
	<li><a href="#content4" data-toggle="tab">その他お知らせ</a></li>
</ul>
<!-- タブ内容 -->
<div class="tab-content">
	<div class="tab-pane active" id="content1">
		<p>WEBST8が小規模事業者持続化補助金に採択されました</p>
    <p>
      <img src="https://webst8.com/blog/wp-content/uploads/2018/07/webst8-hojokin-pass-300x200.png" alt="">
    </p>
	</div>
	<div class="tab-pane" id="content2">
		<p>セミナー情報</p>
    <ul>
      <li>ワードプレスセミナー</li>
      <li>HTML・CSSセミナー</li>
      <li>SEO対策セミナー</li>
    </ul>
	</div>
	<div class="tab-pane" id="content3">
		<p>WEBST8が〇〇新聞の一面に掲載されました。</p>
	</div>
	<div class="tab-pane" id="content4">
		<p>年末年始営業日のお知らせです。</p>
	</div>
</div>

タブのソースコード解説

ここでは、ソースコードの簡単な解説を行います。
 

動作の原理を理解しようとすると少し難しくなるので、まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていきましょう。

■使い方の詳細は下記の公式ドキュメントをご参照ください。
tabs | Javascript – Bootstrap 3.3
 

まとめ コンテンツをタブで分けて見せることができる

今回は、Bootstrap3.3.7のjavascriptプラグイン「タブ」についてご紹介しました。
 

タブは、タブメニューと各メニューに応じたコンテンツを連動させることで、ページを変遷することなく表示コンテンツを切り替えるJavaScriptです。コンテンツをタブで分けて見せる場合に利用できます。
 

まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていってみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。