js不要！bootstrap4を使って簡単にhtmlの要素を切り替える（タブメニューの作成）

こんにちは！(^o^)/

最近飲み屋に行ったら同級生のヤンキーと遭遇し一緒に飲んでたら意外とみんな優しくなっててびっくりしました。ya-buです。

リンク移動せずにページ内で表示するhtmlを切り替えるタブメニューの作成方法を探していたところ、bootstrap4のnavを使用して簡単に実装することができたので紹介します。

f:id:yabu_sw:20180724070307g:plain

対象読者

手軽にページ内でhtmlを切り替えたい人、bootstrapの便利な使い方。

ソースコード

全体のソースコードはこちらに置いておきます。

github.com

1. htmlでの実装

はじめにタブの部分の実装、次にコンテンツ部分の実装をします。

ポイントはbootstrapのnav-tabsです。これによって画面遷移を実行できます。

実際のナビゲーションと押した時に表示されるhtmlの実装はこんな感じ。

<!-- nav_tabs_simple.html -->
<ul class="nav nav-tabs"> #ここにnav-tabsをいれる。
  <li class="nav-item">
    <a href="#tab1" class="nav-link active" data-toggle="tab">タブ1</a>
  </li>
  <li class="nav-item">
    <a href="#tab2" class="nav-link" data-toggle="tab">タブ2</a>
  </li>
  <li class="nav-item">
    <a href="#tab3" class="nav-link" data-toggle="tab">タブ3</a>
  </li>
  <li class="nav-item">
    <a href="#tab4" class="nav-link" data-toggle="tab">タブ4</a>
  </li>
</ul>

コンテンツ部分の実装。

idで囲まれている部分に自分が表示したい内容のhtmlを書くことで、タブを押した時に任意のhtmlを表示することができます。

<!-- nav_tabs_simple.html -->
<div class="tab-content">
  <div id="tab1" class="tab-pane active"> <!-- ここの中身を入れ替える -->
    <h2 class="border_brown">滝</h2>
    <img src="https://www.pakutaso.com/shared/img/thumb/pakutaso-4860_TP_V.jpg" alt="" class="img-fluid">
  </div>
  <div id="tab2" class="tab-pane">
    <div class="table-responsive">
      <table class="table table-sm">
        <tbody>
          <tr>
            <td class="day">1</td>
            <td><p>滝へ</p></td>
          </tr>
          <tr>
            <td class="day">2</td>
            <td><p>花火大会</p></td>
          </tr>
          <tr>
            <td class="day">3</td>
            <td><p>テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト</p></td>
          </tr>
          <tr>
            <td class="day">4</td>
            <td>アメリカへ</td>
          </tr>
          <tr>
            <td class="day">5</td>
            <td>ニューヨークでお買い物</td>
          </tr>
          <tr>
            <td class="day">6</td>
            <td><p>テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・</p></td>
          </tr>
          <tr>
            <td class="day">7</td>
            <td><p>テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・テスト・</p></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="tab3" class="tab-pane">
    <img src="https://www.pakutaso.com/shared/img/thumb/cyusonjitukimisaka1211IMGL0982_TP_V.jpg" alt="" class="img-fluid">
  </div>
  <div id="tab4" class="tab-pane">
    <h2 class="border_brown">花火大会</h2>
    <img src="https://www.pakutaso.com/shared/img/thumb/171116AMEMAN010_TP_V.jpg" alt="" class="img-fluid">
  </div>
</div>

中身は適当です。たったこれだけで実装することができます。

2.cssを変更してみる

/*style.css*/
.row {
    margin: 0;
}

section .weekly img{
    width: 100%;
    height: auto;
    padding-bottom: 5px;
}

section .table .day{
    background-color: black;
    color: white;
    font-weight: bold;
    width: 5%;
    text-align: center;
    padding: 0.5rem 1rem;
}

section .table .time{
    width: 15%;
    padding-left: 1rem;
}

section .weekly .border_brown {
    padding: .5rem;
    border-bottom: 5px solid brown;
}

section  .weekly .nav-tabs .nav-link.active{
    color: #fff!important;
    background-color: brown!important;
}

section .table p{
    margin: 0;
}

section .weekly .nav-tabs {
    border: none;
}

section .nav-tabs .nav-link{
    border-radius: unset;
    border: none;
}


@media (max-width: 992px) {
    .navbar-light .navbar-toggler{
        background: whitesmoke;
        margin: 10px;
    }
}

@media (max-width: 576px) {
    .weekly .nav-tabs a{
        font-size: 0.8rem;
    }

    .weekly .nav-link{
        padding: .2rem .5rem;
    }
    .weekly h2{
        font-size: 1.5rem;
    }
    .weekly img{
        height: 1.5rem;
    }
    section .table .day {
        font-size: .8rem;
    }
    section .table p{
        font-size: .8rem;
    }
}