2 flat logo on transparent 256
2018-05-02

Bootstrapでタブを設定する|コピペで動くサンプル付き

Menu3211231

サイトを制作するとメニューを設定する場合が必ず発生します。 今回はボタンをクリックしても、ページを読み込まずそのまま 画面遷移できるBootstrapのタブメニューを紹介します。 以下にコピペで動くサンプルを記載しています。

タブのサンプルコード

以下コードをメモ帳などに貼り付け.html拡張子で保存し、 展開すれば表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テストタブ</title>

    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>
        /*画像の大きさを指定*/
        img {

            height: 300px;
        }
    </style>
</head>

<body>
<!-- タブのメニュー -->
<ul class="nav nav-tabs">
    <!--activeで初回に表示される内容を指定-->
    <li class="active">
        <a href="#img1" data-toggle="tab">画像タブ1</a>
    </li>
    <li>
        <a href="#img2" data-toggle="tab">画像タブ2</a>
    </li>
    <li>
        <a href="#img3" data-toggle="tab">画像タブ3</a>
    </li>

</ul>

<!-- タブ内容 -->
<div class="tab-content">
    <div class="tab-pane active" id="img1">
        <p>画像1</p>
        <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg"
             alt="...">
    </div>
    <div class="tab-pane" id="img2">
        <p>画像2</p>
        <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample2.jpeg"
             alt="...">
    </div>
    <div class="tab-pane" id="img3">
        <p>画像3</p>
        <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample3.jpeg"
             alt="...">
    </div>
</div>
</body>
</html>

コード解説

タブのメニュー

タブメニューの記載内容はnav nav-tabs クラスで設定します。これはBootstrapのCSSになります。

選択肢の設定

liの配下にdata-toggle="tab"を設定し、href要素にページ内リンクを設定します。

このページ内リンクとタブ内のページ内リンクを紐付ける必要があります。

タブの内容

タブで表示する「内容」を tab-content クラスで囲みます。

関連記事

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

前の記事
次の記事