記事にはプロモーションが含まれる場合があります。
Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。
ここでは、Bootstrap3.3.7に搭載されている「タブ」の使い方をご紹介します。
タブ tabとは
タブメニューとコンテンツを連動することで、ページを変遷することなく表示コンテンツを切り替えるJavaScriptです。例のように、コンテンツをタブで分けて見せる場合に利用できます。
■表示例
タブの作り方
表示例のソースコードは下記の通りです。大きく「タブメニュー」と「タブの内容」から構成されます。
|
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の使い方 導入方法と基本・レスポンシブデザインを徹底解説」をご参照ください。
Bootstrap4の使い方を一通り覚えたい方は「Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！」をご参照ください。
Bootstrap4版でのTabの使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご覧ください。