BootStrap 垂直嵌套选项卡活动选项卡不起作用

BootStrap Vertical Nested Tabs Active Tabs Do Not Work

提问人:Valentina Nardini 提问时间:10/17/2023 更新时间:10/17/2023 访问量:10

问:

我正在使用 BootStrap 在侧边栏中创建带有嵌套选项卡的选项卡。如果我单击嵌套元素,我会看到“活动”类发生变化。问题是即使我单击第一级上的元素,它仍然保持“活动”。如何更改此行为?我在 BootStrap 文档中没有找到这样的东西。

<ul class="nav" id="account" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="forums-tab" data-bs-toggle="tab" data-bs-target="#forums" type="button" role="tab" aria-controls="forums" aria-selected="true"><i class="fa-solid fa-users"></i> Forums</a>
                    <ul class="nav subnav" id="account" role="tablist">
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="forums-tab" data-bs-toggle="tab" data-bs-target="#forums" type="button" role="tab" aria-controls="forums" aria-selected="true">Sustainable Design Leaders</a>
                      </li>
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="forums-tab" data-bs-toggle="tab" data-bs-target="#forums" type="button" role="tab" aria-controls="forums" aria-selected="true">Green Gurus</a>
                      </li>
                    </ul>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="members-tab" data-bs-toggle="tab" data-bs-target="#members" type="button" role="tab" aria-controls="members" aria-selected="false"><i class="fa-solid fa-address-card"></i> Members List</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="webinars-tab" data-bs-toggle="tab" data-bs-target="#webinars" type="button" role="tab" aria-controls="webinars" aria-selected="false"><i class="fa-solid fa-laptop"></i> Webinars</a>
                  <ul class="nav subnav" id="account" role="tablist">
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="forums-tab" data-bs-toggle="tab" data-bs-target="#webinars" type="button" role="tab" aria-controls="forums" aria-selected="true">Peer Networks Webinars</a>
                      </li>
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="forums-tab" data-bs-toggle="tab" data-bs-target="#webinars" type="button" role="tab" aria-controls="forums" aria-selected="true">BuildingGreen Public Webinars</a>
                      </li>
                  </ul>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="calendar-tab" data-bs-toggle="tab" data-bs-target="#calendar" type="button" role="tab" aria-controls="calendar" aria-selected="false"><i class="fa-solid fa-calendar-alt"></i> Calendar</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab" aria-controls="resources" aria-selected="false"><i class="fa-solid fa-book"></i> Resources</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="workinggroups-tab" data-bs-toggle="tab" data-bs-target="#workinggroups" type="button" role="tab" aria-controls="workinggroups" aria-selected="false"><i class="fa-solid fa-sitemap"></i> Working Groups</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="help-tab" data-bs-toggle="tab" data-bs-target="#help" type="button" role="tab" aria-controls="help" aria-selected="false"><i class="fa-solid fa-life-ring"></i> Help</a>
                </li>
          </ul>
嵌套 选项卡 bootstrap-5

评论


答: 暂无答案