MENU

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

2024年5月1日

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

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

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

関連 Bootstrap4版でのTabの使い方について

Bootstrap4版でのTabの使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご覧ください。
https://programming-shikiho.com/bootstrap4-tabs/

合わせて読みたい記事

BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。
https://programming-shikiho.com/css-bootstrap-howto/

目次

タブ 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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>

タブのソースコード解説

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

解説

タブ用のul要素のclass属性に、nav nav-tabs（タブ・メニュー）を指定する。
タブ・メニュー内のa要素にdata-toggle="tab"を指定する。href属性には、タブの表示内容の要素のid名を指定する。
タブ内容用のdiv要素のclassにtab-contentを指定する。
各div要素のclass属性にtab-paneを指定する。idも指定する。
最初に表示したい内容とそのタブ・メニューのclass属性にactiveを指定する。

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

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

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

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

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

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

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

続けて読みたい記事

Bootstrap3.3.7の使い方を一通り覚えたい方は「Bootstrap3の使い方導入方法と基本・レスポンシブデザインを徹底解説」をご参照ください。
https://programming-shikiho.com/css-bootstrap-howto/

Bootstrap4の使い方を一通り覚えたい方は「Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！」をご参照ください。
https://programming-shikiho.com/css-bootstrap4-howto/

Bootstrap4版でのTabの使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご覧ください。
https://programming-shikiho.com/bootstrap4-tabs/

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！