如何用HTML-Bootstrap-JS-JQuery实现二级卡片联动？Bootstrap标签页子层级遇阻

针对你需求的两级卡片切换逻辑（顶部分类按钮显示父卡片，父卡片点击显示对应子卡片），可以避开Bootstrap Tabs嵌套的层级问题，改用容器显隐切换的方式实现，以下是完整代码：

HTML结构（基于Bootstrap 5） #

用Bootstrap原生卡片组件，划分顶部导航、父卡片容器、子卡片容器三个部分：

<!-- 顶部导航菜单 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <div class="container">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#" id="show-parent-cards">分类</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <!-- 父卡片容器 -->
  <div id="parent-cards-container" class="row g-4">
    <!-- 父卡片1 -->
    <div class="col-md-4">
      <div class="card parent-card" data-child-id="child-cards-1">
        <div class="card-body">
          <h5 class="card-title">父卡片1</h5>
          <p class="card-text">点击查看子卡片</p>
        </div>
      </div>
    </div>
    <!-- 父卡片2 -->
    <div class="col-md-4">
      <div class="card parent-card" data-child-id="child-cards-2">
        <div class="card-body">
          <h5 class="card-title">父卡片2</h5>
          <p class="card-text">点击查看子卡片</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 子卡片容器（默认隐藏） -->
  <div id="child-cards-container" class="d-none mt-4">
    <button class="btn btn-outline-secondary mb-3" id="back-to-parents">返回父卡片</button>
    
    <!-- 子卡片组1 -->
    <div id="child-cards-1" class="child-card-group row g-4">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h6 class="card-title">子卡片1-1</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h6 class="card-title">子卡片1-2</h6>
          </div>
        </div>
      </div>
    </div>

    <!-- 子卡片组2 -->
    <div id="child-cards-2" class="child-card-group row g-4 d-none">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h6 class="card-title">子卡片2-1</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h6 class="card-title">子卡片2-2</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery逻辑 #

通过点击事件控制各容器的显隐，用data-*属性关联父卡片和对应的子卡片组：

$(document).ready(function() {
  // 顶部分类按钮：显示父卡片，隐藏子卡片容器
  $('#show-parent-cards').click(function(e) {
    e.preventDefault();
    $('#parent-cards-container').removeClass('d-none');
    $('#child-cards-container').addClass('d-none');
  });

  // 父卡片点击：切换到对应子卡片组
  $('.parent-card').click(function() {
    const targetChildId = $(this).data('child-id');
    $('#parent-cards-container').addClass('d-none');
    $('#child-cards-container').removeClass('d-none');
    // 隐藏所有子卡片组，仅显示目标组
    $('.child-card-group').addClass('d-none');
    $('#' + targetChildId).removeClass('d-none');
  });

  // 返回按钮：回到父卡片列表
  $('#back-to-parents').click(function() {
    $('#child-cards-container').addClass('d-none');
    $('#parent-cards-container').removeClass('d-none');
  });
});

扩展说明 #

如果需要顶部菜单支持多分类过滤父卡片（比如“分类A”“分类B”），可以做以下修改：

1. 给顶部导航按钮添加data-category属性：

<li class="nav-item">
  <a class="nav-link" href="#" data-category="all">全部分类</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#" data-category="category1">分类1</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#" data-category="category2">分类2</a>
</li>

2. 给父卡片添加对应data-category属性：

<div class="card parent-card" data-child-id="child-cards-1" data-category="category1">...</div>

3. 修改顶部按钮的点击逻辑：

$('.navbar-nav .nav-link').click(function(e) {
  e.preventDefault();
  $('.navbar-nav .nav-link').removeClass('active');
  $(this).addClass('active');
  
  const category = $(this).data('category');
  $('#parent-cards-container').removeClass('d-none');
  $('#child-cards-container').addClass('d-none');
  
  // 过滤显示对应分类的父卡片
  if (category === 'all') {
    $('.parent-card').parent().removeClass('d-none');
  } else {
    $('.parent-card').parent().addClass('d-none');
    $(`.parent-card[data-category="${category}"]`).parent().removeClass('d-none');
  }
});

这种方式避免了Tabs嵌套的层级混乱，逻辑清晰且易于扩展维护。

内容的提问来源于stack exchange，提问作者user22721698