javascript - 尝试使用一个选项卡更改多个 div
问题描述
使用按钮切换多个 id 我似乎无法在 bootstrap 5 中执行此操作我尝试了折叠功能，但是由于按钮用作选项卡，因此效果不佳。
使用按钮切换多个 id 我似乎无法在 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>
<!-- 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>
解决方案
在导航栏中nav-tabs，数据属性data-bs-target必须是目标的元素 id tab-pane。你有不同的身份证。下面是固定代码：
<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>
推荐阅读
- python - 日期与时间图上数据的颜色映射
- node.js - 如何让我的应用程序使用我的新 API 密钥？
- python - 使用 pandas 数据框和 numpy 进行多项式拟合
- php - PHP - DOMDocument 抓取 div 不删除图像
- c# - 在我的表单确认对话框后自定义导航表单
- c - 在 c 中处理的信号很少
- azure-application-gateway - Azure 应用程序网关出口 IP
- javascript - ParseFloat 返回字符串而不是 Javascript 中的数字
- android - 如何从 url 打开颤振应用程序？
- android - 每次我尝试运行 String online_user_id = mAuth.getCurrentUser().getUid(); 时都会出错