tab-pane fade show active

html bootstrap5 Sample

リストグループとタブ:list-home-listとtab


  <div class="row">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab"
          href="#list-home" role="tab" aria-controls="list-home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab"
          href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
        <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab"
          href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
        <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab"
          href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <p>本文home</p>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <p>本文profile</p>
        </div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
          <p>本文messages</p>
        </div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
          <p>本文settings</p>
        </div>
      </div>
    </div>
  </div>

js タブパネル:navとnav-tabsとdata-bs-toggleとtablist


ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
  <!-- タブ部分 -->
  <!-- role="tablist"、 role="tab"、 role="tabpanel"、aria- 属性が必要 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
        aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab"
        aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <!-- herfの#とidで切り替える -->
  <div class="tab-content mt-3" id="myTabContent">
    <!-- tab-pane fade show active -->
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
  </div>

js 縦タブパネル:navとnav-tabsとdata-bs-toggleとtablist


縦パネル1Home

縦パネル2Profile

縦パネル3Messages

縦パネル4Settings

  <div class="d-flex align-items-start">
    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab"
        aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab"
        aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab"
        aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab"
        aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>縦パネル1Home</p>
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>縦パネル2Profile</p>
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <p>縦パネル3Messages</p>
      </div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
        <p>縦パネル4Settings</p>
      </div>
    </div>
  </div>