选项卡内容布局显示在其他选项卡中

Posted 2023-02-26

【中文标题】选项卡内容布局显示在其他选项卡中

【英文标题】：Tab-Content Layout shows up in other tab

【发布时间】：2018-06-08 17:03:18

【问题描述】：

我正在使用 Thymeleaf 开发 Spring-Boot 应用程序。 Bootstrap4 是我正在使用的 CSS 框架。我在个人资料页面使用导航选项卡，前三个选项卡没有任何问题，但是当我单击地址选项卡并转到任何其他选项卡时，地址选项卡的内容会显示在其他选项卡中在该标签内容的底部，我不知道为什么。我将包括每个起始选项卡的结果和 css 的图像。由于目前的行数（总共 480 行），我犹豫是否要包含整个页面 html

<div class="tab-pane fade" id="tab-3" role="tabpanel" th:classappend="$classActiveBilling? 'in active show'">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <div class="container">
          <div class="row">
            <div class="col">
              <h4 class="mb-0 align-middle" style="margin-top: 15px;">Billing Information</h4>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="breadcrumb" style="background-color:transparent;">
                <a class="breadcrumb-item active" th:href="@/listOfCreditCards" th:style="$listOfCreditCards? 'color:#6e45e0'">List of Credit Cards</a>
                <a class="breadcrumb-item active" th:href="@/addNewCreditCard" th:style="$addNewCreditCard? 'color:#6e45e0'">Add/Update Credit Card</a>
              </div>
            </div>
          </div>

    <div class="tab-pane fade" id="tab-4" role="tabpanel" th:classappend="$classActiveShipping? 'in active show'">
      <div class="card">
        <div class="card-body">
          <div class="card-title">
            <div class="container">
              <div class="row">
                <div class="col">
                  <h4 class="mb-0 align-middle" style="margin-top: 15px;">Shipping Information</h4>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="breadcrumb" style="background-color:transparent;">
                    <a class="breadcrumb-item active" th:href="@/listOfShippingAddresses" th:style="$listOfShippingAddresses? 'color:#6e45e0'">List of Shipping Addresses</a>
                    <a class="breadcrumb-item active" th:href="@/addNewShippingAddress" th:style="$addNewShippingAddress? 'color:#6e45e0'">Add/Update Shipping Address</a>
                  </div>
                </div>
              </div>

【问题讨论】：

根据行为，我的猜测是 .active 类没有从最后一个选项卡中清除。 #tab-4 有哪些类处于这种奇怪的状态？

每当使用 thymeleaf 表示法附加 classActiveShipping 时，也会附加 active 和 show 类，这是 nav-tab 功能工作所必需的。

当我回到家时，我将不得不仔细检查该页面上哪些课程处于活动状态，并会在必要的帖子中对其进行更新。可能是我的后端导致了这个问题，因为我在使用类似设置的网站的登录/注册部分没有这个问题。

我对 thymeleaf 不熟悉，但从 Bootstrap 的角度来看，所有设置了.active .show 的选项卡都在同一时间可见。当离开一个选项卡时，Bootstrap 会从中删除这两个类。我认为，在这种情况下，这种移除会失败。不过，这只是一个疯狂的猜测。

为了让导航选项卡工作，必须在该选项卡通过 thymeleaf 而不是正常的 css 方式激活时附加它们。没有它就试过了，我无法让它工作。

【参考方案1】：

面包屑是罪魁祸首。它导致运输标签显示在其他窗口中。我只是将其更改为按钮组并获得相同的效果。不幸的是，无论我在 css 上工作了多少次，我都无法让面包屑自己工作，所以就把它完全扔掉了。半回答，但百里香很敏感，并不总是与框架很好地配合。