尝试使用一个选项卡更改多个div

Question

使用按钮切换多个I我似乎不能在bootstrap 5中做到这一点，我尝试了折叠功能，但是这不能很好地工作，因为按钮可以作为一个标签。

使用按钮切换多个I我似乎不能在bootstrap 5中做到这一点，我尝试了折叠功能，但是这不能很好地工作，因为按钮可以作为一个标签。

            <div class="col-11 col-lg-7 text-center">
               
                
                <div class="nav btn-group mt-5"  role="tablist" aria-orientation="vertical" >
                    
                  <a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week"    type="button" role="tab" aria-selected="true">1 Week</a>
                  
                  <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#two-weeks" type="button" role="tab"  aria-selected="false">2 Weeks</a>

                  <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#three-weeks" type="button" role="tab" aria-selected="false">3 Weeks</a>

                  <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#four-weeks" type="button" role="tab" aria-selected="false">4 Weeks</a>
                 
                  <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#more-weeks" type="button" role="tab" aria-selected="false">More Weeks</a>

                  
                </div>

     
                
            </div>

                                                                                                                     $ 90 /first week                                                                                                                                                                                                          $  /two weeks                                                                                                                                                                                                              $  /three weeks                                                                                 

                                <!-- four -->
                                <div class="tab-pane fade" id="four-weeks" role="tabpanel">
                                    <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="135" data-aos data-aos-id="countup:in"></span> <span
                                            class="h6 font-weight-normal align-self-end">/four weeks</span>
                                    </div>
                                </div>  
    
                                <!-- five -->
                                <div class="tab-pane fade" id="more-weeks" role="tabpanel" >
                                    <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="15" data-aos data-aos-id="countup:in">20</span> <span
                                            class="h6 font-weight-normal align-self-end">/extra weeks</span>
                                    </div>
                                </div>  


                            </div>    

                            <hr style="color: #d2d2d7;">
                            <div class="d-flex pt-4">
                                <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
                                </div>
                                <p class="mb-4 color-gray">16 Gorilla Boxes</p>
                            </div>
                            <div class="d-flex">
                                <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
                                </div>
                                <p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
                            </div>

                        

                        </div>

<div class="tab-content " >
    
                                    <!-- one -->
                                    <div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
                                        <div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
                                                class="h6 font-weight-normal align-self-end">/first week</span>
                                        </div>
                                    </div>
        
                                    <!-- two -->
                                    <div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
                                        <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
                                                class="h6 font-weight-normal align-self-end">/two weeks</span>
                                        </div>
                                    </div>    
        
                                    <!-- three -->
                                    <div class="tab-pane fade" id="three-weeks1" role="tabpanel">
                                        <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
                                                class="h6 font-weight-normal align-self-end">/three weeks</span>
                                        </div>
                                    </div>  

                                    <!-- four -->
                                    <div class="tab-pane fade" id="four-weeks1" role="tabpanel">
                                        <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="135" data-aos data-aos-id="countup:in"></span> <span
                                                class="h6 font-weight-normal align-self-end">/four weeks</span>
                                        </div>
                                    </div>  
        
                                    <!-- five -->
                                    <div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
                                        <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="15" data-aos data-aos-id="countup:in">20</span> <span
                                                class="h6 font-weight-normal align-self-end">/extra weeks</span>
                                        </div>
                                    </div>  


                                </div>    
    
                                <hr style="color: #d2d2d7;">
                                <div class="d-flex pt-4">
                                    <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
                                    </div>
                                    <p class="mb-4 color-gray">16 Gorilla Boxes</p>
                                </div>
                                <div class="d-flex">
                                    <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
                                    </div>
                                    <p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
                                </div>

                            

                            </div>

Answer 1

在导航栏nav-tabs中，数据属性data-bs-target必须包含目标tab-pane的元素id。你有一个不同的身份。固定代码如下：

<div class="col-11 col-lg-7 text-center">
    <div class="nav nav-tabs btn-group mt-5"  role="tablist" aria-orientation="vertical" >
        <a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week1"    type="button" role="tab" aria-selected="true" aria-controls="one-week1" >1 Week</a>
         <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#two-weeks1" type="button" role="tab"  aria-selected="false" aria-controls="two-weeks1" >2 Weeks</a>
         <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#three-weeks1" type="button" role="tab" aria-selected="false" aria-controls="three-weeks1" >3 Weeks</a>
         <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#four-weeks1" type="button" role="tab" aria-selected="false" aria-controls="four-weeks1" >4 Weeks</a>
         <a class="btn btn-outline-success btn btn-light"  data-bs-toggle="tab" data-bs-target="#more-weeks1" type="button" role="tab" aria-selected="false" aria-controls="nav-home" >More Weeks</a>
     </div>
 </div>
 <div class="tab-content " >
     <!-- one -->
     <div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
         <div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
                                            class="h6 font-weight-normal align-self-end">/first week</span>
          </div>
      </div>
    
      <!-- two -->
      <div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
          <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
                                            class="h6 font-weight-normal align-self-end">/two weeks</span>
            </div>
        </div>    
    
        <!-- three -->
        <div class="tab-pane fade" id="three-weeks1" role="tabpanel">
              <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
                                            class="h6 font-weight-normal align-self-end">/three weeks</span>
               </div>
          </div>  

          <!-- four -->
          <div class="tab-pane fade" id="four-weeks1" role="tabpanel">
                 <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="135" data-aos data-aos-id="countup:in"></span> <span
                                            class="h6 font-weight-normal align-self-end">/four weeks</span>
                  </div>
            </div>  
    
            <!-- five -->
            <div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
                  <div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"  data-to="15" data-aos data-aos-id="countup:in">20</span> <span
                                            class="h6 font-weight-normal align-self-end">/extra weeks</span>
                   </div>
              </div>  
</div>    

<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
     <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
     </div>
     <p class="mb-4 color-gray">16 Gorilla Boxes</p>
 </div>
 <div class="d-flex">
       <div class="p-0  me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
        </div>
        <p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
  </div>

                        

                        </div>