Bootstrap4のナビゲーションペインに正しい内容が表示されない

Question

次のコードでは、選択したタブに関係なく、Lorem Ipsum eventsしか表示されません。間違いは何ですか？

<div class="container-fluid"> 
    <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"> 
     <li class="nav-item"> 
      <a class="nav-link active" id="events-tab" data-toggle="tab" href="#services-events" role="tab" aria-controls="events" aria-selected="true"> Events</a> 
     </li> 

     <li class="nav-item"> 
      <a class="nav-link" id="personal-tab" data-toggle="tab" href="#services-personal" role="tab" aria-controls="personal" aria-selected="false"> Personal</a> 
     </li> 

     <li class="nav-item"> 
      <a class="nav-link" id="prints-tab" data-toggle="tab" href="#services-prints" role="tab" aria-controls="prints" aria-selected="false"> Prints</a> 
     </li> 

    </ul> 
    <div class="tab-content" id="myTabContent"> 
     <div class="tab-pane fade show active" id="events" role="tabpanel" aria-labelledby="events-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum events </p> 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane fade" id="personal" role="tabpanel" aria-labelledby="personal-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum personal </p> 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane fade" id="prints" role="tabpanel" aria-labelledby="prints-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum prints</p> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

あなたは、タブペインのid Sを参照するためにhref Sを変更する必要があります。

例：href #personalは、個人用タブ（ID：personal）を切り替えます。